Question

我是Marionette的初学者，并尝试将视图输出设为：

＆＃13;

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

＆＃13;

这是ItemView和CollectionView：

＆＃13;

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

＆＃13;

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

Answer 1

您可以使用CompositeView代替Collection视图，您可以在其中传递模板，而不仅仅是设置标记并为项目指定容器。

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

1 个答案: