Question

I’ve prepared a Fiddle to better expose the problem.

http://jsfiddle.net/Xbxwr/

Code:

App = Ember.Application.create();

App.MyView = Ember.View.extend({ templateName: "MyView" });

App.myCollectionView = Ember.CollectionView.create({
    itemViewClass: App.MyView,
    content: [
        Ember.Object.create({ name: "World" }),
        Ember.Object.create({ name: "Foo" }),
        Ember.Object.create({ name: "Bar" })
    ]
});

$(function() { App.initialize(); });

View :

<script type="text/x-handlebars">
   {{collection App.myCollectionView}}
</script>

<script type="text/x-handlebars" data-template-name="MyView">
  <h1>Hello, {{name}}!</h1>
</script>​

What am I doing wrong here?

Answer 1

First, the {{collection}} helper needs a Ember.View class instead of an Ember.View instance. You have to replace Ember.CollectionView.create() with Ember.CollectionView.extend.

Next, in your template, you have to replace {{name}} with {{view.content.name}}, according to View context changes.

Here is your updated JSFiddle: http://jsfiddle.net/AzV4f/

EDIT

Writing {{name}} means context.name, where context is usually the controller (see source code). And as Ember.ObjectController, Ember.ArrayController are just proxy, these property are delegated to their content(see ObjectProxy source code).

So you have to write {{view.content.name}}, because you want the name property of the view.content.

As @tomdale said in this gist comment:

Inside your item view’s template, view should reference the item view,
and view.content should reference the item in your content array.

And you can see the JSFiddle with a controller, without specifying view: JSFiddle