Ember.js 集合迭代中的位置索引

Question

有没有办法在 ember.js 的迭代过程中获取位置索引？

{{#each itemsArray}}
     {{name}}
{{/each}}

我正在寻找一种方法来获得类似的东西：

{{#each itemsArray}}
    {{name}} - {{index}}th place.
{{/each}}

更新：

根据@ebryn 的评论，以下代码可以在不使用每个项目的嵌套视图的情况下工作：

<script type="text/x-handlebars">    
    {{#collection contentBinding="App.peopleController"}}
        Index {{contentIndex}}: {{content.name}} <br />
    {{/collection}}
</script>​

http://jsfiddle.net/WSwna/14/

虽然有类似adjustedIndex的东西，但还是需要嵌套视图。

Answer 1

目前这不是 Handlebars 或 Ember.Handlebars 的功能。我们在#collection/Ember.CollectionView 中有contentIndex。我认为支持#each 也很有用。请在 GitHub 存储库中提交问题：https://github.com/emberjs/ember.js/issues

Answer 2

我想你也可以这样做

//add index property to all each queries
Handlebars.registerHelper('each', function(context, block) {
    var ret = "";
    for(var i=0, j=context.length; i<j; i++) {
        context[i].index = i;
        ret = ret + block(context[i]);
    }
    return ret;
});

Answer 3

实际上是的，您可以使用 {{each}} 帮助器获取当前索引的位置。您必须为列表中的每个项目创建一个视图，然后使用{{_parentView.contentIndex}}。

<script type="text/x-handlebars">
{{#each App.peopleController}}
  {{#view App.PersonView contentBinding="this"}}
    Index {{_parentView.contentIndex}}: {{content.name}} {{adjustedIndex}} <br />
  {{/view}}
{{/each}}
</script>

App = Ember.Application.create();

App.peopleController = Ember.ArrayController.create({
  content: [ { name: 'Roy' }, { name: 'Mike' }, { name: 'Lucy' } ]
});

App.PersonView = Ember.View.extend(Ember.Metamorph, {
  content: null,
  // Just to show you can get the current index here too...
  adjustedIndex: function() {
    return this.getPath('_parentView.contentIndex') + 1;
  }.property()
});

有关工作示例，请参阅 this jsFiddle。

Answer 4

我已经使用集合修改了一点 ud3323 解决方案。 在这里查看：http://jsfiddle.net/johngouf/WSwna/13/

<script type="text/x-handlebars">    
{{#collection contentBinding="App.peopleController"}}
  {{#view App.PersonView contentBinding="this"}}
    Index {{_parentView.contentIndex}}: {{content.name}} {{adjustedIndex}} <br />
  {{/view}}
{{/collection}}
</script>

App = Ember.Application.create();
App.peopleController = Ember.ArrayController.create({
 content: [ { name: 'Roy' }, { name: 'Mike' }, { name: 'Lucy' } ]
});

App.PersonView = Ember.View.extend({
 content: null,
 // Just to show you can get the current index here too...
 adjustedIndex: function() {
    return this.getPath('_parentView.contentIndex') + 1;
 }.property()
});

​​​

Answer 5

从 Ember 9.8 和 pre-1.0 开始，您可以使用视图包装“contentIndex”，以便获取虚拟父级（{{#each}}）。如果您不添加视图，您的上下文最终会成为主模板、列表中的项目或您使用{{#with}} 手动设置的任何内容。从 JS 方面获取 {{#each}} 并非不可能，但翻阅这些子视图会更加痛苦。

{{#each App.peopleController}}
    {{#view}}
        Index {{view._parentView.contentIndex}}: {{name}} <br />
    {{/view}}
{{/each}}

...OR...

{{#each people in App.peopleController}}
    {{#view}}
        Index {{view._parentView.contentIndex}}: {{people.name}} <br />
    {{/view}}
{{/each}}

以防万一你想要一个小提琴手。

DEMO

注意：如果您想修改数字，您可以创建一个视图并执行this.get("_parentView.contentIndex") 以获取索引。

Answer 6

在 RC6 中，CollectionView 为每个呈现的集合视图提供 contentIndex 属性。 Each helper 在其实现中使用CollectionView，所以你可以通过这种方式访问​​索引：

{{#each itemsArray}}
    {{_view.contentIndex}}
{{/each}}

Answer 7

这是一个老问题，但仍然得到很多点击。在当前版本的 Ember.JS 中，可以使用 _view.contentIndex 在循环内显示当前索引。

{{#each}}
    Index: {{_view.contentIndex}}
{{/each}}

如果您需要调整索引（例如从 1 开始），则可以创建可重用的帮助器 increment

Ember.Handlebars.registerBoundHelper('increment', function(integer) {
    return integer + 1;
});

那么你会按照以下方式使用它

{{#each}}
    Index: {{increment _view.contentIndex}}
{{/each}}

更新

从 ember 1.11 开始，您也可以这样做

{{#each people as |person index|}}
   Index: {{increment index}}
{{/each}}

Answer 8

从 Ember 1.11.0 开始，index 是 each 块中的可选参数：

{{#each items as |item index|}}
  {{item.name}} is at index {{index}}
{{/each}}