如何在 Ember.CollectionView 中使用模板

Posted 2023-02-15

【中文标题】如何在 Ember.CollectionView 中使用模板

【英文标题】：How to use a template with Ember.CollectionView

【发布时间】：2013-07-06 09:38:46

【问题描述】：

我正在尝试创建一个带有项目列表的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/

【问题讨论】：

您的jsfiddle.net/S46vH 基本上是空白的，您在发布链接之前是否保存了最新版本？

哎呀，不。应该是：jsfiddle.net/S46vH/1，但现在问题已经解决了。无论如何谢谢。

【参考方案1】：

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

来自 API 文档：

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

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

【讨论】：

啊，有道理。 template 和 templateName 都被列为 Ember API CollectionView 页面上的属性，这让我感到困惑。感谢您的提示！

是的，我也被绊倒了好几次。