2

使用流星 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 和 cursor 函数在客户端向集合添加索引？（在Discover Meteor 书中看到了这一点，但无法正常工作）。

谢谢！

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

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}}在您的模板中使用以跟踪奇数文档。

4

2 回答 2

2

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

使您的方法有效的一种方法是添加一个 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);
  }
}
于 2014-07-14T09:43:10.837 回答
1

您可以考虑升级到 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;
    },
});

还可以考虑检查帖子如何在每个循环中获取 Meteor 模板中数组的索引？

于 2016-06-20T08:44:00.653 回答