CODEWITHSUNDEEP
ember.js
Gabriel G. Roy
Gabriel G. Roy

Reputation: 2632

#each iteration number in Ember.js or {{@index}}

According to this question, it was possible to do something like this with Handlebars rc1:

{{#each links}}
    <li>{{@index}} - {{url}}</li>
{{/each}}

{{@index}} would basically give you the iteration index, which is really useful when creating tables.

When I try this with Ember.js rc3, I get an unexpected token error. Does this not work anymore? Did it ever work? Is there another way to get the iteration index?

Upvotes: 2

Views: 1978

Answers (3)

Surya Purohit
Surya Purohit

Reputation: 1120

This can help you gettin the index with {{index}} and side by side you can know if the iteration in on first or last object of the Array with {{first}} and {{last}} respectively.

Ember.Handlebars.registerHelper("foreach", function(path, options) {
   var ctx;
    var helperName = 'foreach';

    if (arguments.length === 4) {
        Ember.assert("If you pass more than one argument to the foreach helper, it must be in the form #foreach foo in bar", arguments[1] === "in");

        var keywordName = arguments[0];


        options = arguments[3];
        path = arguments[2];

        helperName += ' ' + keywordName + ' in ' + path;

        if (path === '') {
            path = "this";
        }

        options.hash.keyword = keywordName;

    } else if (arguments.length === 1) {
        options = path;
        path = 'this';
    } else {
        helperName += ' ' + path;
    }

    options.hash.dataSourceBinding = path;
    // Set up emptyView as a metamorph with no tag
    //options.hash.emptyViewClass = Ember._MetamorphView;

    // can't rely on this default behavior when use strict
    ctx = this || window;
    var len = options.contexts[0][path].length;
    options.helperName = options.helperName || helperName;
    options.contexts[0][path].map(function(item, index) {
        item.index = index;
        item.first = index === 0;
        item.last = index === len - 1;
    })
    if (options.data.insideGroup && !options.hash.groupedRows && !options.hash.itemViewClass) {
        new GroupedEach(ctx, path, options).render();
    } else {
        return Ember.Handlebars.helpers.collection.call(ctx, Ember.Handlebars.EachView, options);
    }
});

and this can be tested like

{{#foreach array}}
    {{log index first last}}
{{/foreach}}

Upvotes: 1

Piotr
Piotr

Reputation: 223

i had the same problem recently i finish by writing a bound helper and passing them objects via Binding for example item here is an ember DS.Store object and content is a 'content' of the controller. hope it 

Ember.Handlebars.registerBoundHelper 'isPair', (content, options)->
  item =  options.hash.item
  content_name = options.hash.content || 'content'
  if @get(content_name).indexOf(item) % 2 == 0 then 'is-pair' else 'is-unpair'

and in you view you call it 

{{isPair content itemBinding='order'}}

i don't know if it is what you looking for but it might give you some ideas how to use it in your project.

btw. Ember overwrites #each helper that's why there it no @index i suppose

Upvotes: 0

Alex Navasardyan
Alex Navasardyan

Reputation: 536

It looks like it was possible. Can't get it to work with HBS RC3. Probably, is deprecated.

Here's a "hand written" HBS helper.

Upvotes: 1

Related Questions