CODEWITHSUNDEEP
javascriptember.jshandlebars.js
Mohammad Abu Musa
Mohammad Abu Musa

Reputation: 1137

Accessing Index in #each in emberjs

Please check out the code attached:

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

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:

Upvotes: 50

Views: 35757

Answers (5)

typeoneerror
typeoneerror

Reputation: 56948

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.

Upvotes: 1

Feckmore
Feckmore

Reputation: 4714

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

Upvotes: 3

Marcio Junior
Marcio Junior

Reputation: 19128

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

Upvotes: 139

aceofspades
aceofspades

Reputation: 7586

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

Upvotes: 2

Kingpin2k
Kingpin2k

Reputation: 47367

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

Upvotes: 4

Related Questions