javascript 在 emberjs 中访问 #each 中的索引

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19795562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 16:49:12  来源:igfitidea点击:

Accessing Index in #each in emberjs

javascriptember.jshandlebars.js

提问by Mohammad Abu Musa

Please check out the code attached

请检查所附的代码

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

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

I am trying to access the index using {{@index}} but not seems to be compiling. I think handlebars supports that

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

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

It is not working out for, I can't figure out if the {{@index}} is supported or not

它不起作用,我不知道是否支持 {{@index}}

I am using

我在用

  • Ember.VERSION : 1.0.0
  • Handlebars.VERSION : 1.0.0
  • Ember.VERSION : 1.0.0
  • 把手。版本:1.0.0

回答by Marcio Junior

UPDATE

更新

Since this PR, it's now possible to use the each helper with index, taking advance of the new block params syntax. This is available on canary and hopefully will be enabled by default in ember 1.11

由于这个 PR,现在可以使用带有索引的 each 助手,采用新的块参数语法。这在 Canary 上可用,希望在 ember 1.11 中默认启用

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

Live sample

现场样品

FOR OLD VERSIONS

对于旧版本

You can use {{_view.contentIndex}}.

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

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

Live sample

现场样品

回答by Kingpin2k

No it doesn't exist in Ember's version of Handlebars, one way is to use an item controller and add a property to it saying whether it's the first or last etc.

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

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

回答by Feckmore

Note, regarding the @index syntax specifically, as of October 2014:

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

Ember does not support @index (or any of the other @data type properties).

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

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

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

回答by aceofspades

I like the answer from @kingpin2k--The Ember Way is to use a controller to decorate a model, and in this context we want to decorate it by adding an index property to represent its place in the collection.

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

I do it slightly differently, by building a separate collection of instance controllers decorated for the task at hand:

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

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

回答by typeoneerror

If you're just looking to display the index as a 1-indexed value in your view, you could also give CSS Countersa shot. They are supportedall the way back to IE 8.

如果您只是想在视图中将索引显示为 1 索引值,您还可以尝试使用CSS Counters。它们一直支持到 IE 8。