Marionette.js showing CollectionView

Marionette.js showing CollectionView

本文关键字：CollectionView showing js Marionette      更新时间：2023-09-26

我是一个初学者在木偶和试图得到一个视图输出是这样的:

<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属性以获得所需的输出。有可能使用文本!但是我不能把东西放在一起。

您可以使用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
});

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

相关文章：