Accessing Index in #each in emberjs

Question

Please check out the code attached:

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

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

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

I am using:

Ember.VERSION : 1.0.0
Handlebars.VERSION : 1.0.0

Tracking in: https://github.com/toranb/ember-template-compiler/issues/16 — givanse, Sep 23 '14 at 00:23

Marcio Junior · Accepted Answer · 2015-01-12T00:25:25.093

138

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

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

Live sample

FOR OLD VERSIONS

You can use {{_view.contentIndex}}.

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

Live sample

edited Jan 12 '15 at 00:25

answered Nov 05 '13 at 18:04

Marcio Junior

19,078
4
44
47

5

is there a way to get a 1-indexed value? eg. first item should return 1 (not 0) and last item should return n (not n-1) for an array of n items – ioleo May 04 '14 at 14:02
1

I think the only way to do it, is wrapping the model in a computed property with the index, like this http://emberjs.jsbin.com/xeboqegu/1/edit – Marcio Junior May 04 '14 at 17:07
If the items in the each block are updated e.g. by changing their sort order _view.contentIndex is not updated for all items and can result in a incorrect Index values. – TrevTheDev Nov 18 '14 at 09:15
does emblem support block syntax? `= each model as |item index|` isn't working for me. – ahnbizcad Apr 28 '15 at 07:14
@loostro I created a helper that simply increments the number passed in to get the 1-based index: http://pastebin.com/jphC3Xnh – MichaelM Jun 02 '16 at 06:39

score 4 · Answer 2 · answered Nov 05 '13 at 18:10

4

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.

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

answered Nov 05 '13 at 18:10

Kingpin2k

47,277
10
78
96

I think what you have wrote is really great I am sure anyone will take advantage of it. – Mohammad Abu Musa Nov 06 '13 at 08:52
Is there a danger of too tightly coupling the two controllers? – end-user Oct 09 '14 at 18:57
Not danger, but lack of reusability. It all depends on the use case. – Kingpin2k Oct 09 '14 at 19:34

score 3 · Answer 3 · answered Feb 05 '15 at 15:35

3

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

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

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

answered Feb 05 '15 at 15:35

Feckmore

4,322
6
43
51

score 2 · Answer 4 · answered May 16 '14 at 20:29

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.

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

score 1 · Answer 5 · answered Apr 17 '15 at 17:38

1

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

answered Apr 17 '15 at 17:38

typeoneerror

55,990
32
132
223

Accessing Index in #each in emberjs

5 Answers5

Linked