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

假设我有一个对象，某个对象：

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

以及一个模板帮助器，其外观如下（并且工作正常）：

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

我试过：

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

但是在这个助手

getIndex

中，当我在console.log out

这个

中时，我看到：

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

---

是否可以获取索引？

您可以更改getArray以返回元组数组并将索引存储在那里。

meteor>=1.2 Spacebars在1.2中获得了很多功能，包括原生的

@index

。不再需要助手来解决此问题-您只需执行以下操作：

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

模板可以使用如下索引：

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>

---

您也可以使其成为可重用的助手。它很方便：

JS:

UI.registerHelper（'addIndex'，函数（全部）{
返回映射（全部，函数（val，索引）{
返回{index:index，value:val}；
});
});

HTML:

{{#每个addIndex somearray}
{{index}}:{{value}
{{/每个}}

此更改是

---

您将能够执行

{{@index}}

。当meteor支持最新版本的Handlebar时。

以下是一个示例，说明如何向对象添加索引，只要没有名为index的键，它就不应妨碍任何操作。这种方法仅适用于对象数组。现在，如果您有一个值数组，那么应该使用Christan Fritz answer

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

UI.registerHelper（“带索引”，函数（obj）{
obj=obj | |[]；
_.每个（对象、功能（对象、索引）{
obj[索引]。索引=索引；
});
返回obj；
});
{#每个都有索引字段}
{{title}}
{{/每个}}

假设您已将模板订阅到对象数组中，也可以使用下划线

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>

{{{#每个objectsWithIndex}
{{value}}
{{/每个}}

谢谢你的澄清。注意。数据属性是我无法（或不希望）编辑的内容所必需的，因此我别无选择。在Meteor 1.2.0.2上尝试了此操作，@index仍然返回未定义的值。您如何显示@index+1？从1开始而不是从零开始？你需要使用助手。在上面的例子中，

someHelper

可以被实现来返回它的参数+1的值。在我写这篇文章的时候，它还没有发布。可能情况仍然如此：/这是作为Meteor 1.2的一部分发布的

Template.someObject.events({
  'click .item': function() {
    console.log(this.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;
  }
});

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