Ember.js :: Cannot render ember.js models in view

Question

If anyone can put me out of my misery with this I would greatly appreciate it, drving me mad and I know it's gonna be something stupidly simple.

I have an array:

Data

var test = [{"name":"Kober Ltd","town":"Bradford","type":"Z1CA","number":3650645629},
{"name":"Branston Ltd.","town":"Lincoln","type":"Z1CA","number":3650645630}]

and I want to render this info as child elements inside a collectionView:

collectionView

App.ThreeView = Ember.CollectionView.extend({
  itemViewClass: Ember.View.extend({    
      click: function(){
        alert('hello')
       },   
    classNames: ['element','foobar'],
    templateName: 'foo'
  })
})

and here is my controller:

controller

App.ThreeController = Ember.ArrayController.extend({
content: [],
  init: function(){
    var me = this;
    $.each(test,function(k,v){
        var t = App.ThreeModel.create({
            name : v.name,
            town: v.town,
            type: v.type,
            number: v.number
        }) 
        me.addObject( t )
    })
    console.log( me.content )
  }
})

Templates:

    <script type="text/x-handlebars" data-template-name="application">
        {{outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="three">
    </script>

    <script type="text/x-handlebars" data-template-name="foo">
        <div class="symbol"> {{ view.content.type }} </div>
        <div class="number"> {{ view.content.number }} </div>
        <div class="name"> {{ view.content.name }} </div>
        <div class="town"> {{ view.content.town }} </div>
    </script>

I am using the latest Ember so...V2 router that syncs up all the parts with the 'Three' name. Every will work if I put the array directly into the view:

App.ThreeView = Ember.CollectionView.extend({
  content: test, // manually added a pure array into view content
  itemViewClass: Ember.View.extend({    
      click: function(){
          alert('hello')
      },    
      classNames: ['element','foobar'],
      templateName: 'foo'
  })
})

But when I try and do this 'properly', using Ember.js Objects, I get no rendered views ( aside from an empty application view ).

I have tried work arounds, like adding a 'contentBinding' from the view to the controller just to see if I can force a connection but still nothing. It is important that I render the view through the container as I am using Three.js to pick up on the rendered content and manipulate further.

So, to summarise: I can render pure arrays in view, but nothing passed from controller. Incidentally, the controller is definitely being instituted as I can console log its contents on init. If i change the view name, the controller is not instantiated so I know the namespacing is working.

thanks in advance!

sly7_7 sly7_7 · Accepted Answer · 2013-01-12T12:14:43

I'm not sure to embrace the whole problem, but for now, when you define your controller, in the init() function, first don't forget to call this._super() (it will go through the class hierarchy and call the constructors). Maybe that's just the missing thing.

Edit: it seems like with the new router, defining a view as a CollectionView does not work. so I replaced it with a normal Ember.View, and use an {each} helper in the template.

<script type="text/x-handlebars" data-template-name="three">
  {{each controller itemViewClass="App.FooView" tagName="ul"}} 
</script>

here is a minimal working fiddle: http://jsfiddle.net/Sly7/qCdAY/14/

EDIT 2:

By re-reading the question, and seeing you try to bind the CollectionView content's property to controller, I tried it, because it just work fine :)

http://jsfiddle.net/Sly7/qCdAY/15/