4

How can I set the id for elements created by the Ember.js handelbars helper #each?

If you take a look at http://jsfiddle.net/7QL5z/ I tried to define an id on calling the #each helper.

The resulting HTML looks like this:

<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 the div nor the ul (that would be the most usable way) get the specified id. Is it possible at all? If not: how can I access these elements via Ember?

2 Answers 2

3

I tried setting 'elementId' instead of 'id' on the '#each' but it didn't seem to work either...

Otherwise you can create an animals 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>
0

You can just specify the id on a view using id="whatever", but it won't work on a {{#each}}

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

Might be a slightly more elegant solution but what I've put in that js fiddle seems to work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.