把手@first不适用于Ember.js 1.0.0

Question

The version of Ember I am using uses a version of Handlebars that, in its release notes, claim to support @index and @first.

However, when I use these in my hbs files, I get the following error:

SyntaxError: Unexpected token ,

Now, with a little bit of research, for the @index portion,

{{_view.contentIndex}}

seems to render the index. However, I cannot use these in conditionals. What I need is a working version of :

{{#each array}}
 {{#if @first }}
  <!-- first element specific html -->
 {{else}}
  <!-- other html -->
 {{/if}}
{{/each}}

I have tried _view.first and also tried to use _view.contentIndex in a helper, but failed. Is there a workaround to this?

Edit: the version of ember being used is v1.0.0

Answer 1

Please stick to Ember guides instead of Handlebars guides. Ember uses now it's own version of Handlebars - HTMLBars and it has many differences. That's why you can't say:

The version of Ember I am using uses a version of Handlebars

At least if you use recent versions.

You could however access first element of array in different way:

array.[0]

You could also use index:

{{#each array as |item index|}}
  {{index}} is index of current element
{{/each}}

You could also mimic behavior of @first using ember-truth-helpers addon and taking advantage of eq helper - thanks to kristjan reinhold for this idea:

{{#each array as |item index|}}
  {{if (eq index 0)}}
    <!-- first element specific html -->
  {{else}}
    <!-- other html -->
  {{/if}}
{{/each}}

Answer 2

I made a workaround by registereing an Ember Helper, ultimately.

/* Attempt to add a first to each class. */
Ember.Handlebars.registerHelper('ifFirst', function(value, options) {
    var context = (options.fn.contexts && options.fn.contexts[0]) || this;
    var currentIndex = options.data.view.contentIndex;
    if (currentIndex == 0){
        // return true
        return options.fn(this);
    } else {
        // return false
        return options.inverse(this);
    }
});

This might be overkill, but the idea is that if you since contentIndex already contains the index of the array, you simply check if it equals 0. Could be used to check for the last item as well, as long as you make sure to check against the array's length.

Of course, I agree with the previous answers that an upgrade to a newer version of Ember is definitely better when possible, but for anyone who is stuck like I was right now, I hope this helps.

Answer 3

This solution works without any helpers.

{{#each items as |item notFirst|}}
   {{#if notFirst}}
      // handle second to last item here
   {{else}}
      // handle first item of array here
   {{/if}}
{{/each}}