说我有一个对象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
"abc"
"def"
data-value
我this.index直接尝试过,但未定义。我也尝试使用帮助器:
this.index
<template name="someObject"> // takes someObject as data {{#each getArray}} <div class="item" data-value="{{getindex}}">{{this}}</div> {{/each}} </template>
但是getIndex当我使用console.log退出此帮助程序时,this我看到:
getIndex
String {0: "a", 1: "b", 2: "c", length: 3} String {0: "d", 1: "e", 2: "f", length: 3}
是否可以获取索引?
空格键在1.2中获得了很多功能,其中包括native @index。不再需要帮助程序来解决此问题-您只需执行以下操作:
@index
{{#each getArray}} <div class="item" data-value="{{@index}}">{{this}}</div> {{/each}}
或者,如果您想在助手中使用索引:
{{#each getArray}} <div class="item" data-value="{{someHelper @index}}">{{this}}</div> {{/each}}
将来的某个时候,空格键可能会提供直接在模板中确定索引的功能。但是,在撰写本文时,获取索引的唯一方法是修改助手返回的结果。例如,您可以getArray返回包含avalue和an 的对象数组index,如下所示:
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>
值得一提的是,您可能不需要通过将该索引存储
Template.someObject.events({ 'click .item': function() { console.log(this.index); } });