How to use a template with Ember.CollectionView

Question

I'm trying to create a CollectionView with a list of items and have it render into the template specified in the CollectionView's templateName property. However, I can't get it to work.

it looks like this:

App = Ember.Application.create({});

App.ItemView = Ember.View.extend({
    templateName: 'item_template',
    tagName: 'li'
});

App.CollectionViewTest = Ember.CollectionView.extend({
    templateName: 'collection_template', 
    itemViewClass: App.ItemView,

    content: [
        { title: 'Item 1' },
        { title: 'Item 2' }
    ]
});

with templates like this:

<script type="text/x-handlebars" data-template-name="application">
    <h1>Testing CollectionView TemplateName</h1>
    {{collection App.CollectionViewTest}}
</script>

<script type="text/x-handlebars" data-template-name="collection_template">
    <h2>The CollectionView Template</h2>
    <ul>
        {{outlet}}
    </ul>
</script>

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

As it is, the <h2> never gets rendered, unless I change App.CollectionViewTest to a Ember.View, but then, obviously, there's no list items.

Is this a bug? or am I missing something?

-- here's a js fiddle with the code: http://jsfiddle.net/S46vH/

Answer 1

Since Ember.CollectionView is a subclass of Ember.ContainerView, it does not have a template of its own.

From the API docs:

A template, templateName, defaultTemplate, layout, layoutName or defaultLayout property on a container view will not result in the template or layout being rendered. The HTML contents of a Ember.ContainerView's DOM representation will only be the rendered HTML of its child views.

To make this work you can move the collection_template markup into application template or make it a partial. Then replace {{outlet}} with {{collection App.CollectionViewTest}}