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/

虽然有类似adjustIndex的东西,但是需要嵌套视图.

Answer 1

这是一个古老的问题,但仍然有很多热门话题.在当前版本的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 2

实际上是的,您可以使用{{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()
});

有关工作示例,请参阅此jsFiddle.

Answer 3

在RC6 中为每个渲染的集合视图CollectionView提供了contentIndex属性.Each帮助程序CollectionView在其实现中使用,因此您可以通过以下方式访问索引:

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

Answer 4

从Ember 9.8和1.0之前开始,您可以使用视图包装"contentIndex"以获取虚拟父级({{#each}}).如果您不添加视图,则您的上下文最终将成为主模板,列表中的项目或您手动设置的内容{{#with}}.{{#each}}从JS方面来看并不是不可能的,但是通过这些儿童观点来看更是痛苦.

{{#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")如果要根据需要修改数字,可以创建视图并执行索引.