Emberjs increment in the template

Question

I feel like I may be doing to much for a simple problem.

If index = 0, how do I increment index in a template.

Ideally, I would like to do something like this.

{{index+1}}

From what I understand the solution is to write a helper function like the following.

import Ember from 'ember';

export function plusOne(params) {
  return parseInt(params) + 1;
}

export default Ember.HTMLBars.makeBoundHelper(plusOne);

And then in the template you would do the following.

{{plus-one index}}

So hopefully, I am wrong and there is a much easier way to do this. And possibly a easier way to do 'simple' processing in the template. Not sure if there may be an objection because there may be 'to much' logic in the template.

Any guidance on this would be greatly appreciated.

Thanks!

Lysin

What are your use case for index in template @Lysin – Weak

And possible a easier way to do 'simple' processing in the template. That would be a no. Handlebars templates were designed to be logicless. You should be doing any and all processing in your code. – Disproportionate

If you have stuff[] and you want to display 1 next to stuff[0] in your template, then 2 next to stuff[1], ect ... – Lysin

@Disproportionate so does that go for the {{index + 1}} thing as well? Just want to make sure there is not a better way to do that. Thanks. – Lysin

Yes, that applies to {{index + 1}} as well. There's no way to do any processing or calculations directly in a template, you have to use a helper or computed property. – Disproportionate

Answer 1

The short answer is, no. There is no way to do any real computing logic in the templates. The helper is your best bet for adding 1 to index, within a template.

Of course, one would wonder why you would want to add +1 to any index anyway? possibly to label your itterations in a non-zero based way? in that case would you not render an ordered list instead?

<ol>
  {{#each model as |foo|}}
    <li>{{foo.bar}}</li>
  {{/each}}
</ol>

Resulting in:

1. I'm a foo
2. I'm a foo too!
3. I'm a foo three!

---

another possibility is this (as an alternative to using a helper for every index)

model: ['Foo', 'Man', 'Chu']

foosWithCount: Ember.computed.map('model', function(foo, index) {
  return Ember.Object.create({
    name: foo,
    count: index + 1
  });
});

then

{{#each foosWithCount as |foo|}}
  <p>I'm {{foo.name}} and I'm #{{foo.count}}</p>
{{/each}}

Resulting in:

I'm Foo and I'm #1

I'm Man and I'm #2

I'm Chu and I'm #3

Godroon

Thanks for your answer. I think the ordered list may be a bit limiting. I could not do something like foo is 1 in the array, foo too! is 2 in the array, foo three! is 3 in the array. But I guess that is why there are helpers. :-) – Lysin

As of Ember 1.11, you can do {{#each model as |foo index|}} to get the current loop index. – Disproportionate

Answer 2

While learning Ember, I struggled a lot with that issue too. I have created a gist showing you how this can be done using a very simple Handlebars helper method.

https://gist.github.com/makabde/7d38d09d28b2a167b003

And then all you have to do is call this helper with {{your-helper-method index}}; it should then output the index incremented by 1 or whatever the increment you have set in your helper method.

Perfumer

This really solved the problem, I don't know why it's not higher up. This is better than any of the other solutions. Thanks for your gist, saved me a lot of time! – Tonus

Answer 3

If you need to access the index in a each block use:

<ul>
  {{#each model as |foo index|}}
   <li>{{index}} : {{foo.bar}}</li>
  {{/each}}
</ul>

see: This Answer

You can then use a template helper to convert from index to position.

JSBin Example

Phototube

Answer 4

i use ember-composable-helpers inc hepler

{{#each model as |foo index|}}
  {{inc index}}
{{/each}}

Condor