javascript - 如何使用 Backbone.Marionette 处理嵌套的 CompositeView？

Question

我正在使用 Backbone 研究更大规模的数据结构，并遇到过可以通过 CompositeViews 很好地表示数据的场合；也就是说，CollectionViews 在它们周围添加了“添加的绒毛”，例如标题、按钮等。

但是，我在将 CompositeView 相互嵌套时遇到很多困难。使用 CompositeView 上的标准 itemView 属性来呈现另一个 CompositeView 似乎根本不会触发。

假设我有一个 parent ItemView，这样实例化(在 Derick Bailey's example 之后；假设这个顶层是调用集合上的初始 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);

SchedulerCompositeView 看起来是这样的:

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，我不太确定这样做的正确技术是什么。

作为引用，这是我要实现的结构的粗略模型；如果有比嵌套 CompositeView 更好的方式来实现这个目标，我当然会洗耳恭听:

http://jsfiddle.net/KAWB8/

Answer 1

Eureka ! deven98602 让我走上了正确的道路。

要记住的关键是，如果您要嵌套多个 CompositeView(或 CollectionView)，则向下的每个级联级别将代表其父级集合中的一个单元；也就是说，我之前的 SchedulerDetailCompositeView 表示 SchedulerCompositeView 集合中的单个模型。因此，如果我正在构建嵌套的 CompositeView(可能基于深层嵌套的数据)，我必须重新定义这些级联子项的集合，因为它们只有一个与之关联的模型，而不是要呈现的适当集合。

也就是说，更新后的 SchedulerDetailCompositeView 看起来是这样的:

return Backbone.Marionette.CompositeView.extend({
    template: Handlebars.compile(schedulerDetailCompositeViewTemplate),
    itemView: SchedulerDetailItemView,
    initialize: function () {
        var Load = Backbone.Model.extend();

        var LoadCollection = Backbone.Collection.extend({
            model: Load
        });

        // this array of loads, nested within my JSON data, represents
        //  a new collection to be rendered as models using SchedulerDetailItemView
        var loadList = new LoadCollection(this.model.get("loads"));

        this.collection = loadList;
    },
    appendHtml: function (collectionView, itemView) {
        collectionView.$("#schedulerDetailStops").append(itemView.el);
    }
});

设置集合后，appendHtml() 会按预期触发并呈现这个新设置的集合中的每个新模型。