javascript - 如何在每个循环中获取 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 out this 我看到:

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

是否可以获取索引？

Answer 1

meteor >= 1.2

空格键在 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}}

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>

另见 this answer对于类似的游标示例。

值得一提的是，您可能不需要通过 data-value 将索引存储在 DOM 本身中，除非外部插件需要它。正如您在下面的示例中看到的，每个 item 都有一个带有索引值的上下文。有关详细信息，请参阅 this blog post .

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