CODEWITHSUNDEEP
ember.js
Tom Smykowski
Tom Smykowski

Reputation: 26109

How to display number of item in Ember.js template?

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?

Upvotes: 0

Views: 193

Answers (3)

machinat
machinat

Reputation: 41

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!

Upvotes: 1

Marcello Nuccio
Marcello Nuccio

Reputation: 3901

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 ".". */
}

Upvotes: 0

Cory Loken
Cory Loken

Reputation: 1395

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.

Upvotes: 1

Related Questions