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

Say I have an object, someObject:

假设我有一个对象,someObject:

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

And a template helper that looks like this (and works fine):

还有一个看起来像这样的模板助手(并且工作正常):

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

How should I construct the html to get the array index?

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

I've tried:

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

In which case this successfully returns "abc" and "def". Which is good. But how can I get the index of the array to put into the attribute data-value?

在这种情况下,这成功返回“abc”和“def”。这很好。但是如何才能将数组的索引放入属性数据值?

I've tried this.index directly but it's undefined. I also tried using a helper:

我直接尝试过this.index,但它未定义。我也尝试过使用帮手:

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

but in this helper getIndex when I console.log out this I see:

但是当我在console.log中时,在这个助手getIndex中我看到:

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

Is it possible to get the index?

有可能获得索引吗?

6 个解决方案

#1

meteor >= 1.2

Spacebars gained a lot of functionality in 1.2, including a native @index. Helpers are no longer needed to solve this problem - you can simply do this:

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

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

or, if you want to use the index inside a helper:

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

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

meteor < 1.2

Sometime in the future, spacebars may offer the ability to determine the index directly in the template. However, as of this writing, the only way to get the index is to modify the result returned by the helper. For example you could have getArray return an array of objects which contain a value and an index, like this:

在将来的某个时间,空格键可以提供直接在模板中确定索引的功能。但是,在撰写本文时,获取索引的唯一方法是修改帮助程序返回的结果。例如,你可以让getArray返回一个包含值和索引的对象数组,如下所示:

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

And the template could use the index like this:

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

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

Also see this answer for a similar example with cursors.

有关游标的类似示例,请参阅此答案。

It's worth mentioning that you probably don't need to store the index in the DOM itself via data-value, unless it's needed by an external plugin. As you can see in the example below, each item has a context with an index value. For more information, see this blog post.

值得一提的是,您可能不需要通过数据值将索引存储在DOM中,除非外部插件需要它。正如您在下面的示例中所看到的,每个项目都有一个带索引值的上下文。有关更多信息,请参阅此博客文章。

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

#2

You can make this a reusable helper, too. It's handy to have:

您也可以将其作为可重用的帮助程序。有这样的方便:

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

#3

This change is coming and you will be able to do {{@index}}. When meteor supports the most recent version of handlebars.

这一变化即将到来,您将可以{{@ index}}。当meteor支持最新版本的把手时。

#4

You can change getArray to return an array of tupples and store the index there.

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

#5

Here is an example of how you can just add index to the object and as long as you didnt have a key named index before it shouldnt obstruct anything this way works only with arrays of objects. Now if you have a array of values you should use Christan Fritz answer

下面是一个如何向对象添加索引的示例,只要你没有一个名为index的键,它就不应该阻塞任何东西,这种方式只适用于对象数组。现在,如果你有一系列的价值观,你应该使用Christan Fritz的答案

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

#6

You can do it with underscore too, assuming that you have subscribed your template to array of objects

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

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

and in your html...

并在你的HTML ...

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