如何在每个循环的 Meteor 模板中获取数组的索引?

IT技术 javascript meteor spacebars
2021-02-10 17:03:22

假设我有一个对象,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}

是否可以获取索引?

6个回答

流星 >= 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}}

流星 < 1.2

将来的某个时候,空格键可能会提供直接在模板中确定索引的能力。但是,在撰写本文时,获取索引的唯一方法是修改助手返回的结果。例如,您可以getArray返回一个包含 avalue和 an的对象数组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>

另请参阅此答案以获取带有游标的类似示例。

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

Template.someObject.events({
  'click .item': function() {
    console.log(this.index);
  }
});
你会如何显示@index + 1?例如。从 1 而不是零开始?
2021-03-29 17:03:22
感谢您解决这个问题。笔记。数据属性是我无法(或希望)编辑的内容所必需的,所以我别无选择。
2021-03-30 17:03:22
您需要使用帮手。在上面的例子中,someHelper可以实现返回其参数的值 + 1。
2021-04-01 17:03:22
在 Meteor 1.2.0.2 上试过这个,@index 仍然返回 undefined。
2021-04-07 17:03:22

你也可以把它变成一个可重用的助手。很方便:

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 支持最新版本的把手时。

这是作为 Meteor 1.2 的一部分发布的
2021-03-15 17:03:22
在我写这篇文章的时候,它还没有发布。可能情况仍然如此:/
2021-04-13 17:03:22

您可以更改 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}}