我正在使用 Backbone 进入更大规模的数据结构,并且遇到了通过 CompositeViews 很好地表示数据的情况;也就是说,CollectionView 周围添加了“附加内容”,例如标题、按钮等。
然而,我在将 CompositeViews 相互嵌套时遇到了很多困难。使用 CompositeView 上的标准 itemView 属性来渲染另一个 CompositeView 似乎根本没有触发。
假设我有一个父项目视图,这样实例化(如下德里克·贝利的例子;假设这个顶层是初始的位置fetch()
在集合上将被调用):
var User = Backbone.Model.extend({});
var UserCollection = Backbone.Collection.extend({
model: User
});
var userList = new UserCollection(userData);
var schedulerCompositeView = new SchedulerCompositeView({
collection: userList
});
schedulerCompositeView.render();
this.ui.schedulerWidget.html(schedulerCompositeView.el);
And 调度程序复合视图看起来像这样:
return Backbone.Marionette.CompositeView.extend({
template: Handlebars.compile(schedulerCompositeViewTemplate),
itemView: SchedulerDetailCompositeView,
appendHtml: function (collectionView, itemView) {
collectionView.$("#schedulerGroups").append(itemView.el);
}
});
最后,SchedulerDetailCompositeView:
return Backbone.Marionette.CompositeView.extend({
template: Handlebars.compile(schedulerDetailCompositeViewTemplate),
itemView: SchedulerDetailItemView,
appendHtml: function (collectionView, itemView) {
collectionView.$("#schedulerDetailStops").append(itemView.el);
}
});
SchedulerDetailCompositeView 永远不会被实例化;事实上,它的appendHtml()
方法似乎根本不会触发。
显然这里还缺少一些其他信息;显然,其目的是将集合/模型传递给 SchedulerDetailCompositeView,但由于嵌套的 CompositeView,我不太确定这样做的正确技术是什么。
作为参考,这是我想要实现的结构的粗略模型;如果有比嵌套 CompositeViews 更好的方式来实现这个目标,我当然会洗耳恭听:
http://jsfiddle.net/KAWB8/