如何使用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改为a Ember.View,但显然,没有列表项.

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

- 这是一个js小提琴代码:http://jsfiddle.net/S46vH/

Answer 1

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

来自 API 文档：

容器视图上的 template、templateName、defaultTemplate、layout、layoutName 或 defaultLayout 属性不会导致模板或布局被渲染。Ember.ContainerView 的 DOM 表示的 HTML 内容将仅是其子视图的渲染 HTML。

要实现此功能，您可以将collection_template标记移动到应用程序模板中或使其成为部分标记。然后替换{{outlet}}为{{collection App.CollectionViewTest}}