跟踪 Meteor Spacebars Collection (blaze) 的偶数/奇数索引答案

【问题标题】：Tracking even/odd index of Meteor Spacebars Collection (blaze)跟踪 Meteor Spacebars Collection (blaze) 的偶数/奇数索引
【发布时间】：2014-09-04 01:28:19
【问题描述】：

使用 Meteor 0.8.x

我正在尝试用集合中的两列文档填充模板。一栏一半，另一栏一半。我能想到的最好的办法是遍历集合两次，每边一次，并使用索引或计数器来跟踪偶数/奇数。空格键没有@index 或@even @odd。在 stackoverflow 和 ggroup 中对此进行了多次讨论，但我不确定如何在我自己的帮助程序中正确执行此操作。

试过这个模板：

<div class="row">
    <article>
        {{#each post}}
            {{#if oddCounter}}
               {{> templatePost}}
            {{/if}}
        {{/each}}
    </article>
    <article>
       {{#each post}}
           {{#if evenCounter}}
               {{> templatePost}}
           {{/if}}
       {{/each}}
    </article>
</div>

使用这些助手：

var evenPost = 0;
var oddPost = 0;

Template.dashboard.helpers({
    evenCounter: function () {
        return (evenPost++ % 2 === 0);
    },
    oddCounter: function () {
        return !(oddPost++ % 2 === 0);
    },
    posts: function () {
        return Posts.find();
    }
});

首先，这看起来很粗糙，并且最初确实有效。但它实际上有一个缺陷，即每当更改文档并重新绘制模板（templatePost）时，它会迭代oddCounter / evenCounter变量并将项目移动到另一列。不知道如何解决。

我计算每个帖子的方法是否完全有缺陷？

你能重构它以防止 Meteor 在重绘时递增吗？

也许使用自定义的 .map 和光标函数来为客户端的集合添加索引？（在Discover Meteor book 看到这个，但无法正常工作）。

谢谢！

更新 1：D 先生的解决方案有效，但我能够从动画章节获得 Discover Meteor example 并坚持使用它。

Template.dashboard.helpers({
    posts: function () {
        var index = 0;
        var posts = Posts.find();
        return posts.map(function(post, index, cursor) {
            post._index = index++;
            return post;
        });
    },
    even: function () {
        return (this._index % 2) === 0;
    }
});

更新 2：为了减少几行代码，删除奇数计数器并在模板中使用 {{#unless even}} 来跟踪奇数文档。

【问题讨论】：

这似乎是一个用 CSS（而不是代码）更容易解决的问题。只需将所有物品放入一个容器中，并确保它们适合两个宽。它甚至还有 :even 和 :odd 伪选择器，用于对两列中的元素进行样式设置。

标签： javascript meteor meteor-blaze

【解决方案1】：

由于流星的反应性质，当数据更改时，您的方法将不起作用，计数器将与显示的内容不匹配。

使您的方法有效的一种方法是添加一个 Deps.dependancy 以在每次发生更改时重新计算值，但这似乎不必要地昂贵，并且为每个文档添加索引会更好。

这种方法效率很低，但是如果您的帖子数量很少，它应该可以正常工作。

 <div class="row">
        <article>
            {{#each post}}
                {{#if odd}}
                   {{> templatePost}}
                {{/if}}
            {{/each}}
        </article>
        <article>
           {{#each post}}
               {{#if even}}
                   {{> templatePost}}
               {{/if}}
           {{/each}}
        </article>
    </div>

Template.dashboard.helpers = {
  post: function() {
    var posts = [];
    var _i = 0;
    Posts.find().forEach(function(p) {
      p.position = _i;
      _i++;
      posts.push(p);
    });
    return posts;
  },
  odd: function() {
    return !(this.position % 2 === 0);
  },
  even: function() {
    return (this.position % 2 === 0);
  }
}

【讨论】：

这行得通！请注意，我实际上得到了 discovermeteor.com 示例工作（来自关于动画的书籍章节），但 D 先生的也很好。

【解决方案2】：

您可以考虑升级到 Meteor 1.2 或 1.3，最终在模板中有行索引：

{{@index}} - 行的索引，从 0 开始

这里有一个帮助突出偶数行：

<div class="{{#if even @index}}evenClass{{/if}}">
  I'm a row.
</div>

Template.template_name.helpers({
    even(value) {
        return (value % 2) === 0;
    },
});

还可以考虑查看帖子How can I get the index of an array in a Meteor template each loop?

【讨论】：