我怎样才能得到每个循环meteor模板中的数组的索引？

说我有一个对象，someObject： 

{ foo: "apple", myArray: ["abc", "def"] }

和一个模板助手，看起来像这样（和工作正常）： 

 getArray: function(){ var self = this; self.myArray = self.myArray || []; return self.myArray; }

我应该如何构造html来获取数组索引？

我试过了： 

 <template name="someObject"> // takes someObject as data {{#each getArray}} <div class="item" data-value="{{WHAT GOES HERE?}}">{{this}}</div> {{/each}} </template>

在这种情况下， this成功地返回"abc"和"def" 。 哪个好。 但是，我怎么能得到数组的索引放入属性的data-value ？

我已经直接尝试this.index ，但它是未定义的。 我也尝试过使用帮手： 

 <template name="someObject"> // takes someObject as data {{#each getArray}} <div class="item" data-value="{{getindex}}">{{this}}</div> {{/each}} </template>

但在这个帮手getIndex当我console.log出this我看到： 

 String {0: "a", 1: "b", 2: "c", length: 3} String {0: "d", 1: "e", 2: "f", length: 3}

是否有可能获得索引？

meteor> = 1.2

Spacebars在1.2版本中获得了很多function，包括本地@index 。 帮手不再需要解决这个问题 – 你可以简单地这样做： 

 {{#each getArray}} <div class="item" data-value="{{@index}}">{{this}}</div> {{/each}}

或者，如果你想使用帮助器中的索引： 

 {{#each getArray}} <div class="item" data-value="{{someHelper @index}}">{{this}}</div> {{/each}}

meteor<1.2

在将来的某个时候，空间条可以提供直接在模板中确定索引的能力。 但是，在撰写本文时，获取索引的唯一方法是修改助手返回的结果。 例如，你可以让getArray返回一个包含一个value和一个index的对象数组，像这样： 

 getArray: function() { var self = this; self.myArray = self.myArray || []; return _.map(self.myArray, function(value, index){ return {value: value, index: index}; }); }

模板可以像这样使用索引： 

 <template name="someObject"> {{#each getArray}} <div class="item" data-value="{{index}}">{{value}}</div> {{/each}} </template>

对于带有游标的类似示例，也请参阅此答案 。

值得一提的是，除非需要外部插件，否则可能不需要通过data-value将索引存储在DOM本身中。 正如您在下面的示例中所看到的，每个item都有一个带有索引值的上下文。 有关更多信息，请参阅此博客文章 。 

 Template.someObject.events({ 'click .item': function() { console.log(this.index); } });

你也可以使它成为一个可重用的帮手。 有这样的方便：

JS： 

 UI.registerHelper('addIndex', function (all) { return _.map(all, function(val, index) { return {index: index, value: val}; }); });

HTML： 

 {{#each addIndex somearray}} <div> {{index}}: {{value}} </div> {{/each}}

这种变化即将到来 ，您将可以{{@index}} 。 当meteor支持最新版本的车把。

你可以改变getArray来返回一个数组，并在那里存储索引。

下面是一个如何添加索引到对象的例子，只要你没有一个名为index的键，它不应该阻塞任何东西，这种方式只能用于对象数组。 现在如果你有一系列值，你应该使用克里斯坦弗里茨的答案 

 UI.registerHelper("withIndex", function(obj) { obj = obj || []; _.each(obj, function (object, index) { obj[index].index = index; }); return obj; }); {#each withIndex fields}} <div class="form-group field" data-index="{{index}}"> <label for="{{name}}">{{title}}</label> </div> {{/each}}

假设您已经将模板订阅到了对象数组，也可以用下划线来完成 

 Template.yourTemplate.helpers({ objectsWithIndex: function() { _.map(this.objects, function(value, key) { return _.extend(value, { index: key }); }); return this.objects; } });

并在您的HTML … 

 <template name="someObject"> {{#each objectsWithIndex}} <div class="item" data-value="{{index}}">{{value}}</div> {{/each}} </template>
Interesting Posts