Marionette.js 显示 CollectionView

Question

我是 Marionette 的初学者，正在尝试让视图输出如下所示：

<div class="style_title">Component Library</div>
<ul class="style_content">
    <li class="style_item">title1</li>
    <li class="style_item">title2</li>
</ul>

这是 ItemView 和 CollectionView：

var TitleView = Marionette.ItemView.extend({
       template: _.template("<%=title%>"),
       tagName: "li",
       className: "style_item"
    });

    var TitleListView = Marionette.CollectionView.extend({
        tagName: "ul", 
        className: "style_content",
        initialize: function() {
            this.collection = new Backbone.Collection();
            ComponentService.getComponents().forEach(function (title) {
                this.collection.add(title);
            }.bind(this));
        },
        childView: TitleView  
    });

如何添加 div 属性以获得所需的输出。有可能使用 text!js，但我无法将它们组合在一起。提前谢谢你。

Answer 1

您可以使用 CompositeView 而不是集合视图，在集合视图中您可以传递模板，而不仅仅是设置标签和指定项目的容器。

var TitleListView = Marionette.CompositeView.extend({
    template: _.template('<div class="style_title">Component Library</div><ul class="style_content"></ul>'),
    childViewContainer: 'ul.style_content',
    initialize: function() {
        this.collection = new Backbone.Collection();
        ComponentService.getComponents().forEach(function (title) {
            this.collection.add(title);
        }.bind(this));
    },
    childView: TitleView
});

实际上在 Marionette 的下一个版本中，他们计划删除 CompositeView 并允许将模板传递给 CollectionView。

Marionette.js 显示 CollectionView

Marionette.js showing CollectionView

html

javascript

marionette