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

小编典典

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

javascript

说我有一个对象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}

是否可以获取索引？

阅读 284

2020-05-01

共1个答案

小编典典

流星> = 1.2

空格键在1.2中获得了很多功能，其中包括native @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返回包含avalue和an 的对象数组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>

值得一提的是，您可能不需要通过将该索引存储

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

2020-05-01