5

我正在尝试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>

事实上，除非我更改为 a <h2>，否则永远不会渲染，但显然，没有列表项。App.CollectionViewTestEmber.View

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

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

4

1 回答 1

4

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

从 API 文档：

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

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

于 2013-07-08T22:47:00.803 回答