Question

I am trying to understand how Ember.CollectionView works and I am having a basic issue with displaying the content of my ArrayController in the DOM. Here is my little jsfiddle experiment so you can see for yourself. Here is the coffeescript:

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

App.Item = Em.View.create
  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.create
  classNames: ['epic-view']
  contentBinding: 'App.items'
  itemViewClass: 'App.Item'

App.epicView.appendTo('body')

As you can see in the output of that fiddle, I have not been able to figure out how to access and display the title of objects in the list. When I append the view to body using the call to App.epicView.appendTo('body') it seems to iterate over the three objects but does not print anything.

Any ideas what am I missing here?

ps: I am using Ember 1.0pre

Answer 1

I would simply do something like this: http://jsfiddle.net/Sly7/nevW2/67/

Declare your views (with extend) instead of instantiate them (with create)