在emberjs中访问#each中的索引

时间:2013-11-05 17:55:51

标签: javascript ember.js handlebars.js

大家好,请查看附件中的代码

http://jsbin.com/atuBaXE/2/

我正在尝试使用{{@index}}访问索引,但似乎没有编译。我认为把手支持

{{#each item in model}}
  {{@index}} 
  {{item}}
{{/each}}

它无法解决,我无法弄清楚是否支持{{@index}}

我正在使用

Ember.VERSION:1.0.0 Handlebars.VERSION:1.0.0

由于

5 个答案:

答案 0 :(得分:125)

更新

this PR开始,现在可以使用带索引的每个帮助程序,提前使用新的块参数语法。这在金丝雀上可用,并且希望默认情况下在ember 1.11

中启用
{{#each model as |item index|}}
  <li>
    Index: {{index}} Content: {{item}}
  </li>
{{/each}}

Live sample

旧版本

您可以使用{{_view.contentIndex}}

{{#each item in model}}
  <li>
    Index: {{_view.contentIndex}} Content: {{item}}
  </li>
{{/each}}

Live sample

答案 1 :(得分:4)

在Ember的Handlebars版本中不存在,一种方法是使用项目控制器并向其添加属性,说明它是第一个还是最后一个等等。

App.IndexController = Ember.ArrayController.extend({
  itemController: 'itemer'
});

App.ItemerController = Ember.ObjectController.extend({
  needs:['index'],
  isFirst: function(){
    return this.get('color') === this.get('controllers.index.firstObject.color');
  }.property('controllers.index.firstObject')
});

http://emberjs.jsbin.com/aPewofu/1/edit

答案 2 :(得分:3)

请注意,特别是关于@index语法,截至2014年10月:

  

Ember不支持@index(或任何其他@data类型   属性)。

https://github.com/toranb/ember-template-compiler/issues/16#issuecomment-38823756

答案 3 :(得分:2)

我喜欢@ kingpin2k的答案 - Ember Way是使用控制器来装饰模型,在这种情况下,我们想通过添加索引属性来装饰它,以表示它在集合中的位置。

我的做法略有不同,通过为手头的任务构建一个单独的实例控制器集合:

App.PostsIndexController = Ember.ArrayController.extend({
  indexedContent: function() {
    get('content').map(function(item, index) {
      App.PostsItemController.create({
        content: item,
        index: index
      });
    });
  }.property('content')
});

App.PostsItemController = Ember.ObjectController.extend({
  index: null
});

答案 4 :(得分:1)

如果您只是想在视图中将索引显示为1索引值,您还可以给CSS Counters一个镜头。它们supported一直回到IE 8。