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

Posted 2023-03-08

【中文标题】如何在每个循环的 Meteor 模板中获取数组的索引？

【英文标题】：How can I get the index of an array in a Meteor template each loop?

【发布时间】：2014-08-05 04:17:50

【问题描述】：

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

是否可以获取索引？

【参考方案1】：

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

流星

将来某个时候，空格键可能会提供直接在模板中确定索引的功能。但是，在撰写本文时，获取索引的唯一方法是修改助手返回的结果。例如，您可以让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);
  
);

【讨论】：

感谢您解决这个问题。笔记。 data 属性是我无法（或希望）编辑的内容所必需的，因此我别无选择。

在 Meteor 1.2.0.2 上试过这个，@index 仍然返回 undefined。

你将如何显示@index + 1？例如。从 1 而不是 0 开始？

您需要使用助手。在上面的示例中，someHelper 可以实现为返回其参数的值 + 1。

【参考方案2】：

您也可以将其设为可重复使用的助手。它很方便：

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

【参考方案3】：

这个变化是coming 你将能够做到@index。什么时候流星支持最新版本的车把。

【讨论】：

在我写这篇文章的时候它还没有发布。可能情况仍然如此：/

这是作为 Meteor 1.2 的一部分发布的

【参考方案4】：

您可以更改 getArray 以返回一个元组数组并将索引存储在那里。

【参考方案5】：

这是一个示例，说明如何仅向对象添加索引，并且只要您没有名为 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

【参考方案6】：

你也可以用下划线来做，假设你已经为你的模板订阅了对象数组

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>