Ember CollectionView Hooks

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

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/latest-builds/ember.js"></script>
<script type="text/x-handlebars">
  {{view App.EpicView}}
</script>

CoffeeScript

window.App = Ember.Application.create()

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

  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)

  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'