Question

Using Ember.CollectionView I want to access and manipulate the DOM element which is being inserted by each child view. The issue I have is that I don’t know how to get a reference to the element from within didInsertElement. Here is the jsFiddle — the summery of coffeescript is below:

window.App = Ember.Application.create()
window.App.initialize()

App.Item = Em.View.extend
  didInsertElement: () ->
    console.log ">>> element is: ", this.element

App.items = Em.ArrayController.create()

App.items.set('content',[
    Em.Object.create({title:"AN", id:"item-one"}),
    Em.Object.create({title:"Epic", id:"item-two"}),
    Em.Object.create({title:"View", id:"item-three"})
])

App.EpicView = Ember.CollectionView.extend
  classNames: ['epic-view']
  contentBinding: 'App.items'
  itemViewClass: 'App.Item'

this.element is undefined. I have also tried calling element and that is undefined as well. According to the docs, there is an element property available inside the view, but I don’t know how to access it, and I am not sure if it is available from within didInsertElement or not.

How can I get the id of the DOM element that was just inserted into the view? Ideally, I would like not having to search for it in the DOM since the view should already be aware of what it is inserting into the DOM.

ps: I am using Ember 1.0pre

Answer 1

Use get(‘element’) or get(‘elementId’) to access properties in Ember