在 CollectionView 中的 Marionette 个 ItemView 之间注入 html

Question

我有一个集合视图（下面的MyCollView），并且想（有条件地）在不同的itemViews（下面的MyItemView）之间注入html 而不修改MyItemView。我知道 CollectionViews 可以有很多不同的选项，但没有看到任何用于此特定用途的选项。

更多细节：我想在 MyCollView 中的每个 MyItemView 之后注入一个 <br> 标记，只要 MyItemView 的实例不是集合中的最后一个。这是我的集合视图将呈现的输出：

<div>name1</div>
<br>
<div>name2</div>
<br>
<div>name3</div>

这是我的代码：

MyItemView = Backbone.Marionette.ItemView.extend({
    template: _.template('<div><%= name %></div>')
});

MyCollView = Backbone.Marionette.CollectionView.extend({
    childView: MyItemView
    //ideally, I would like to provide some other property to accomplish my goal here, like...
    //separatorHtml: '<br>'
});

var myColl = new Backbone.Collection([
    {name: 'name1'},
    {name: 'name2'},
    {name: 'name3'}
]);

thisCollView = new MyCollView({
    collection: myColl
});

thisCollView.render();

我现在的想法是将 MyItemView 扩展为 MyModifiedItemView 并放入这个可选的 <br> 标签，但我不知道是否还有更多的 "marionette-y" 的方法。有什么想法吗？谢谢！

Answer 1

通常，您可以使用 Marionette 视图事件将 html 元素挂接到该视图的模板。没关系，如果您要附加的元素存在于内部视图的 el。你的情况有点棘手，因为你想在每个项目视图之外添加一个 <br/> 。（如果您想确切地知道为什么这是一个问题，请在评论中问我）。相反，我们要做的是在添加子项时在父 CollectionView 中监听。

您也希望您添加的 <br> 元素是有条件的。我们可以利用内部属性的 Marionette 视图，view._index，连同对集合的引用 Backbone 添加到每个模型，来测试当前项目视图是否渲染的是最后一个。

将所有这些放在一起，您所要做的就是将属性添加到 MyCollView:

onAddChild : function (childview) {
    if (this.collection.length !== childview._index + 1)
        childview.$el.after('<br/>');
}

检查刚刚添加的子视图是否是集合中的最后一个视图。

在 CollectionView 中的 Marionette 个 ItemView 之间注入 html

Inject html between Marionette ItemViews inside a CollectionView

marionette

backbone-views

collectionview