Access attributes of the DOM elements from ember.js views

问题

How can I access attributes of DOM elements that are being inserted by ember.js view, from within the view itself. Here is a short example. Lets say I have the following cat.handlebars template:

{{#collection contentBinding="App.catsController"}}
  <div class="cat" {{bindAttr id="view.content.id"}}></div>
{{/collection}}

which is used in this view:

App.CatView = Ember.View.extend({
  templateName: 'cat',
  catsBinding: 'App.catsController',
  didInsertElement: () ->
    #need to get the id of each DIV that is being inserted to add some JavaScript for it
    console.log 'context it ', this.$()
})

this.$() returns a very deeply nested object and I can not find any sign of my DIVs in it. Also view.content.id is not defined when I am inside the didInsertElement function.

To reiterate my question, when I am inside a view, how can I add some Javascript code related to some of the DOM elements that are being inserted by the view.

回答1:

You can use {{view.contentIndex}} instead of {{view.content.id}}. Since you have added a classname cat to your div you can access it by using this.$('#index.cat'), where index should be replaced by the index of the content you want to access.

来源：https://stackoverflow.com/questions/12499921/access-attributes-of-the-dom-elements-from-ember-js-views