[英]How can I loop through an object and get the index of each element and store it in an array?
[英]How can I get the index of an array in a Meteor template each loop?
假设我有一个对象,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了this
我见:
String {0: "a", 1: "b", 2: "c", length: 3}
String {0: "d", 1: "e", 2: "f", length: 3}
是否可以获取索引?
空格键在 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}}
将来的某个时候,空格键可能会提供直接在模板中确定索引的能力。 但是,在撰写本文时,获取索引的唯一方法是修改助手返回的结果。 例如,您可以让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>
有关游标的类似示例,另请参阅此答案。
值得一提的是,您可能不需要通过data-value
将索引存储在 DOM 本身中,除非外部插件需要它。 正如您在下面的示例中看到的,每个item
都有一个带有索引值的上下文。 有关更多信息,请参阅此博客文章。
Template.someObject.events({
'click .item': function() {
console.log(this.index);
}
});
你也可以把它变成一个可重用的助手。 很方便:
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}}
此更改即将到来,您将能够执行{{@index}}
。 当meteor 支持最新版本的把手时。
您可以更改 getArray 以返回元组数组并将索引存储在那里。
这是一个示例,说明如何向对象添加索引,并且只要您没有名为 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}}
您也可以使用下划线来完成,假设您已将模板订阅到对象数组
Template.yourTemplate.helpers({
objectsWithIndex: function() {
_.map(this.objects, function(value, key) {
return _.extend(value, {
index: key
});
});
return this.objects;
}
});
并在您的 html 中...
<template name="someObject">
{{#each objectsWithIndex}}
<div class="item" data-value="{{index}}">{{value}}</div>
{{/each}}
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.