Setting the ID of the item created by #each helper

Question

How to set id for elements created by handberbars Ember.js #each helper?

If you look at http://jsfiddle.net/7QL5z/ , I tried to determine the id when calling the #each helper.

The resulting HTML is as follows:

<div id="ember191" class="ember-view"> <ul> <li id="ember349" class="ember-view"> Animal - Animals </li> <li id="ember389" class="ember-view"> Android - Androids </li> <li id="ember427" class="ember-view"> Human - Humans </li> </ul> </div> 

Neither div nor ul (this is not the most convenient way) will receive the specified id. Is it even possible? If not: how can I access these elements through Ember?

Answer 1

I tried setting 'elementId' instead of 'id' in '#each', but it didn't seem to work ...

Otherwise, you can create an animal list view.

 App.AnimalsListView = Ember.CollectionView.extend({ tagName: 'ul', contentBinding: 'App.itemsController.content', classNames: ['animals'], elementId: 'animalsList', itemViewClass: Ember.View.extend({ classNames: ['animal'], templateName: 'ember/templates/animals/animal', elementId:Ember.computed(function(){ 'animal-'+this.getPath('content.name') }) }) }); 

In your animal template:

 {{ content.get('name') }} - {{ content.get('pluralized') }} 

And finally, in your main html file

 <script type="text/x-handlebars"> {{ view App.AnimalsListView }} </script> 

Answer 2

You can simply specify the identifier in the view using id="whatever" , but it will not work on {{#each}}

http://jsfiddle.net/tomwhatmore/TJvR6/

Maybe a slightly more elegant solution, but what I put into this js script seems to work.