Ember CollectionView Hooks

This is a little experiment with Em.CollectionView. I am trying to understand when the various different hooks get fired.

by sporritt

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.min.js"></script>
<script type="text/x-handlebars">
  {{view App.EpicView}}
</script>

CoffeeScript

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

App.Item = Em.View.extend
  tagName: 'li'

  willInsertElement: () ->
    console.log "**willInsertElement** ", this.get('element')    
    elementId = this.get('elementId')
    console.log "element in DOM: ", $("#"+elementId)
    
  didInsertElement: () ->
    console.log "**didInsertElement** ", this.get('element')
    elementId = this.get('elementId')
    console.log "element in DOM: ", $("#"+elementId)
    console.log "body parent: ", $("#"+elementId).parents("body")

  willRender: () ->
    console.log "**willRender** ", this.get('element')
    elementId = this.get('elementId')
    console.log "element in DOM: ", $("#"+elementId)
    
  willRerender: () ->
    console.log "**willRerender** ", this.get('element')
    elementId = this.get('elementId')
    console.log "element in DOM: ", $("#"+elementId)

  afterRender: () ->
    console.log "**willRerender** ", this.get('element')
    elementId = this.get('elementId')
    console.log "element in DOM: ", $("#"+elementId)

  #beforeRender: () ->
  #**BEFORE RENDER** its not a state hook -- bad things happen if overwritten as so

  willDestroyElement: () ->
    console.log "Target acquired **WILL DESTROY ELEMENT: ** ", this.get('element')
    elementId = this.get('elementId')
    console.log "element in DOM: ", $("#"+elementId)
    
  template: Ember.Handlebars.compile("~~ {{view.content.title}} ~~")

App.items = Em.ArrayController.create()

App.items.set('content',[
    Em.Object.create({title:"The Element", id:"item-one"})
  ])
  
App.EpicView = Ember.CollectionView.extend
  contentBinding: 'App.items'
  itemViewClass: 'App.Item'