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()
});

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

Answer 3

在RC6 CollectionView为每个渲染的集合视图提供contentIndex属性。 Each帮助器在其实现中使用CollectionView，因此您可以通过这种方式访问索引：

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

Answer 4

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

Answer 5

自Ember 1.11.0起，index是each块中的可选参数：

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

Answer 6

我使用集合修改了一些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 7

我认为你也可以做这样的事情

//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;
});

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

7 个答案: