如何在 Ember.CollectionView 中使用模板

Question

我正在尝试创建一个带有项目列表的CollectionView，并将其呈现到CollectionView 的templateName 属性中指定的模板中。但是，我无法让它工作。

看起来像这样：

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' }
    ]
});

使用这样的模板：

<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>

事实上，<h2> 永远不会被渲染，除非我将 App.CollectionViewTest 更改为 Ember.View，但显然，没有列表项。

这是一个错误吗？还是我错过了什么？

-- 这是一个 js 代码：http://jsfiddle.net/S46vH/

Answer 1

由于Ember.CollectionView 是Ember.ContainerView 的子类，它没有自己的模板。

来自 API 文档：

容器视图上的模板、模板名称、默认模板、布局、布局名称或默认布局属性不会导致模板或布局被渲染。 Ember.ContainerView 的 DOM 表示的 HTML 内容将只是其子视图的呈现 HTML。

要完成这项工作，您可以将collection_template 标记移动到应用程序模板中或使其成为部分模板。然后将{{outlet}}替换为{{collection App.CollectionViewTest}}