5

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!

user2517182
  • 1,241
  • 3
  • 15
  • 37
  • What are your use case for index in template @user2517182 – Sushant Apr 16 '15 at 19:31
  • 1
    `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. – GJK Apr 16 '15 at 19:41
  • If you have `stuff[]` and you want to display 1 next to `stuff[0]` in your template, then 2 next to `stuff[1]`, ect ... – user2517182 Apr 16 '15 at 19:52
  • @GJK 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. – user2517182 Apr 16 '15 at 19:53
  • 1
    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. – GJK Apr 16 '15 at 21:01

4 Answers4

6

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

Grapho
  • 1,654
  • 15
  • 33
  • 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. :-) – user2517182 Apr 16 '15 at 20:11
  • 1
    As of Ember 1.11, you can do `{{#each model as |foo index|}}` to get the current loop index. – GJK Apr 16 '15 at 21:03
3

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.

makabde
  • 85
  • 11
  • 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! – Vinay Raghu Jun 20 '16 at 20:54
2

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

Community
  • 1
  • 1
Andre Helberg
  • 552
  • 1
  • 6
  • 17
1

i use ember-composable-helpers inc hepler

{{#each model as |foo index|}}
  {{inc index}}
{{/each}}
Ramil Gilfanov
  • 552
  • 1
  • 8
  • 12