Ember CollectionView Example

This is a little experiment with Em.CollectionView and Em.ArrayController. I am trying to understand here how updates to the content of ArrayController will effect the CollectionView.

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 "I **WILL** indert the element", this.$()

  didInsertElement: () ->
    console.log "I **DID** insert the element", this.$()
    
  template: Ember.Handlebars.compile("~~ {{view.content.title}} ~~")

App.items = Em.ArrayController.create()

App.items.set('content',[
    Em.Object.create({title:"AN"}),
    Em.Object.create({title:"Epic"}),
    Em.Object.create({title:"View"})
  ])
  
App.EpicView = Ember.CollectionView.extend
  classNames: ['epic-view']
  contentBinding: 'App.items'
  itemViewClass: 'App.Item'