1

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

runspired
  • 2,642
  • 1
  • 19
  • 24
Darshan
  • 937
  • 3
  • 15
  • 27
  • Which version of Ember? – Daniel Kmak Nov 12 '15 at 20:39
  • Are you actually using version 1.0.0 exactly? If so you might want to consider upgrading (if possible). That release is over 2 years old. – GJK Nov 12 '15 at 23:01
  • Yeah, I am. I'm stuck with this for legacy reasons. As soon as we can, we'll be upgrading to the new Ember, but until then, I gotta make it work. Believe you me - I know it. – Darshan Nov 12 '15 at 23:05

3 Answers3

3

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}}
Daniel Kmak
  • 18,164
  • 7
  • 66
  • 89
  • Ember does not support any of the Handlebars '@' properties. See [this discussion](https://github.com/toranb/ember-template-compiler/issues/16), and [this answer](https://stackoverflow.com/questions/25395355/ember-cli-support-for-handlebars-vars-in-each-helper-i-e-index-key-firs). – andorov Nov 12 '15 at 20:44
  • 1
    Using this index iteration he could probably use eq helper right? – kristjan reinhold Nov 12 '15 at 20:49
  • Ah. Unfortunate about the @data properties. The version of ember being used is v1.0.0. I understand that ember's version of handlebars is now different; regardless, there must be a way to work around it to check if the current item is the first one. I can't upgrade to Ember's recent version at the moment ( the 'each object as referredName' is a new syntax that deprecates the old one, if I'm not mistaken) and I can't separate out a chunk of hbs code using {{array.[0]}}'s properties. – Darshan Nov 12 '15 at 20:53
  • It might be hard to recreate that behavior in 1.0.0 version. – Daniel Kmak Nov 12 '15 at 20:57
  • Check Darshan's answer. He wrote something useful. – Daniel Kmak Nov 12 '15 at 21:38
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.

Darshan
  • 937
  • 3
  • 15
  • 27
1

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}}
tarball111
  • 83
  • 8