6

下面的示例将生成一个球员姓名列表，其中球员是来自MongoDB数据库的数据集。

<template name="players">
  {{#each topScorers}}
    <div>{{name}}</div>
  {{/each}}
</template>

但是，我想连续显示其中四个，并且在打印四个玩家之后，我想将行除以<hr />然后继续。例如，

<template name="players">
  {{#each topScorers}}
    <div style="float:left;">{{name}}</div>
    {{if index%4==0}}
      <hr style="clear:both;" />
    {{/if}
  {{/each}}
</template>

在遍历集合时如何做这样的事情？

4

2 回答 2

7

为了保持集合的反应性，另一个解决方案是使用带有地图光标功能的模板助手。

下面是一个示例，展示了在将 each 与集合一起使用时如何返回索引：

index.html:

<template name="print_collection_indices">
  {{#each items}}
    index: {{ this.index }}
  {{/each}}
</template>

index.js:

Items = new Meteor.Collection('items');

Template.print_collection_indices.items = function() {
  var items = Items.find().map(function(doc, index, cursor) {
    var i = _.extend(doc, {index: index});
    return i;
  });
  return items;
};
于 2013-12-28T08:14:10.570 回答
6

现在没有简单的方法可以做到这一点，最新版本的车把支持一个@index字段（可以做你想要的），但它还没有在流星的版本中实现 - https://github.com/meteor/meteor/issues/ 489 .

当然你可以实现你自己的{{#each_with_index}}助手，它看起来像这样：

Handlebars.registerHelper('each_with_index', function(items, options) {
  var out = '';
  for(var i=0, l=items.length; i<l; i++) {
    var key = 'Branch-' + i;
    out = out + Spark.labelBranch(key,function(){ 
      options.fn({data: items[i], index: i});
    });
  }

  return out;
});

这样做的缺点是你失去了流星{{#each}}助手的好处，当单个项目发生变化时，它不会反应性地重新渲染整个列表。

编辑：感谢@zorlak 指向https://github.com/meteor/meteor/issues/281#issuecomment-13162687

于 2012-12-14T00:18:16.247 回答