如何在每个循环中获取Meteor模板中的数组索引？

Question

假设我有一个对象,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}

有可能得到索引吗？

Answer 1

流星> = 1.2

Spacebars在1.2中获得了很多功能,包括原生功能@index.不再需要助手来解决这个问题 - 你可以简单地这样做:

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

或者,如果要在帮助器中使用索引:

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

流星<1.2

在将来的某个时候,空格键可以提供直接在模板中确定索引的能力.但是,在撰写本文时,获取索引的唯一方法是修改帮助程序返回的结果.例如,你可以getArray返回一个包含a value和a的对象数组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);
  }
});

Answer 2

你也可以把它变成一个可重复使用的助手.这样做很方便:

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}}

Answer 3

这种变化 即将来临 ,你将能够做到{{@index}}.当meteor支持最新版本的把手时.