Question

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

更多细节：只要<br>的实例不是集合中的最后一个，我想在MyCollView中的每个MyItemView之后注入一个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>标记，但我不知道是否还有更多的＆＃34 ;牵线木偶-γ＆＃34;这样做的方式。有什么想法吗？谢谢！

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 ItemViews之间的html

1 个答案: