如何在每个循环的 Meteor 模板中获取数组的索引? [英] How can I get the index of an array in a Meteor template each loop?

问题描述

假设我有一个对象，someObject:

Say I have an object, 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;
}

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

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

我试过了:

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

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?

我已经直接尝试了 this.index 但它是未定义的.我也尝试使用助手:

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

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

但是在这个助手 getIndex 当我 console.log out this 我看到:

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

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

是否可以获取索引?

推荐答案

meteor >= 1.2

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

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:

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

流星<1.2

将来的某个时候，空格键可能会提供直接在模板中确定索引的能力.但是，在撰写本文时，获取索引的唯一方法是修改助手返回的结果.例如，您可以让 getArray 返回一个包含 value 和 index 的对象数组，如下所示:

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: 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.

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

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.

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

这篇关于如何在每个循环的 Meteor 模板中获取数组的索引?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！