Question

我正在尝试使用Marionette的CollectionView和ItemView创建一个简单的列表。

iv = Marionette.ItemView.extend({
    tagName: "li",
    className: "card",
    template: _.template("empty-template")
});

cv = Marionette.CollectionView.extend({
    tagName: "ul",
    className: "card-list",
    childView: iv
});

collection = new Backbone.Collection([
    { name: "alice" },
    { name: "bob" },
    { name: "carol" }
);

view = new cv({collection: collection});
view.render()

这很好用，创建包含三个项目且没有内容的列表（模板为空）。但是html代码生成的所有东西都粘在一起，没有换行符。像这样：

<ul class="card-list"><li class="card"></li><li class="card"></li><li class="card"></li></ul>

有没有办法解决这个问题？

<ul class="card-list">
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
</ul>

jsFiddle

编辑：任何类型的空间都可以。 li为inline-block，需要间隔才能在justify上使用ul。

Answer 1

好的，这是猜测，但也许您可以更改附加html的默认处理程序。所以你的“cv”代码看起来像这样：

cv = Marionette.CollectionView.extend({
    tagName: "ul",
    className: "card-list",
    childView: iv,
    attachBuffer: function(collectionView, buffer) {
        collectionView.$el.append(buffer + '\n');
    },
});

木偶视图不会在每个元素后添加换行符

1 个答案: