假设我有一个对象,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 out this
我看到:
String {0: "a", 1: "b", 2: "c", length: 3}
String {0: "d", 1: "e", 2: "f", length: 3}
是否可以获取索引?
最佳答案
meteor >= 1.2
空格键在 1.2 中获得了很多功能,包括原生的 @index
。不再需要助手来解决这个问题 - 你可以简单地这样做:
{{#each getArray}}
<div class="item" data-value="{{@index}}">{{this}}</div>
{{/each}}
或者,如果你想在助手中使用索引:
{{#each getArray}}
<div class="item" data-value="{{someHelper @index}}">{{this}}</div>
{{/each}}
meteor <1.2
在未来的某个时候,空格键可能会提供直接在模板中确定索引的能力。然而,在撰写本文时,获取索引的唯一方法是修改助手返回的结果。例如,您可以让 getArray
返回包含一个 value
和一个 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>
另见 this answer对于类似的游标示例。
值得一提的是,您可能不需要通过 data-value
将索引存储在 DOM 本身中,除非外部插件需要它。正如您在下面的示例中看到的,每个 item
都有一个带有索引值的上下文。有关详细信息,请参阅 this blog post .
Template.someObject.events({
'click .item': function() {
console.log(this.index);
}
});
关于javascript - 如何在每个循环中获取 Meteor 模板中数组的索引?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24225071/