如何在每个循环中获取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>

在这种情况下此成功返回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 .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

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

meteor< 1.2

将来某个时候，空格键可以提供直接在模板中确定索引的功能。但是，在撰写本文时，获取索引的唯一方法是修改帮助程序返回的结果。例如，您可以使用 getArray 返回包含值和索引的对象数组，像这样：

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>

另见这个答案。

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

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屋！