如何在Ember.js模板中显示项目数？

Question

I can display data from object like this:

 <ul>
  {{#each people}}
    <li>Hello, {{name}}!</li>
  {{/each}}
</ul>

But i would want to add the number of the record like this:

<ul>
  {{#each people}}
    {{NUMBER_OF_PERSON}} <li>Hello, {{name}}!</li>
  {{/each}}
</ul>

How to do this?

Answer 1

I'm going to assume you mean display an index. Currently you need to use a handlebars helper. This gist shows an example https://gist.github.com/burin/1048968 scrolling through the comments it looks like there are several approaches.

Handlebars has @index and @key, but currently these do now work with emberjs.

Answer 2

In the controller, you can write a function like this:

no_of_person: function(){
                 return this._parentView.contentIndex;
              }.property('people')

In the template, {{no_of_person}} will show the index number of the record.

Hope this helps!

Answer 3

You can use CSS Counters . It works for tables too. Here's an example taken from MDN:

 ul { counter-reset: section; /* Creates a new instance of the section counter with each ol element */ list-style-type: none; } li:before { counter-increment: section; /* Increments only this instance of the section counter */ content: counters(section,".") " "; /* Adds the value of all instances of the section counter separated by a ".". */ }