访问emberjs中#each中的索引

kq0g1dla  于 2022-09-28  发布在  其他
关注(0)|答案(5)|浏览(170)

请查看随附的代码:
http://jsbin.com/atuBaXE/2/
我正在尝试使用{{@index}}访问索引,但它似乎没有编译。我认为车把支持这一点:

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

这对我不起作用。我不知道{{@index}}是否受支持。
我正在使用:

  • 恩伯。版本:1.0.0
  • 把手。版本:1.0.0
tquggr8v

tquggr8v1#

更新

由于是this PR,现在可以在索引中使用each helper,从而改进了新的块参数语法。这在canary上可用,希望在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

v9tzhpje

v9tzhpje2#

不,它在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

beq87vna

beq87vna3#

注意,特别是关于@index语法,截至2014年10月:
Ember不支持@index(或任何其他@data-type属性)。
https://github.com/toranb/ember-template-compiler/issues/16#issuecomment-38823756

x0fgdtte

x0fgdtte4#

我喜欢@kingpin2k的答案——Ember方式是使用控制器来修饰模型,在这种情况下,我们希望通过添加索引属性来修饰模型以表示它在集合中的位置。
我的做法略有不同,我为手头的任务构建了一个单独的示例控制器集合:

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

vhipe2zx5#

如果您只是想在视图中以1索引值的形式显示索引,也可以尝试一下CSS Counters。一直到IE 8都支持它们。

相关问题