如何使用Backbone.Marionette处理嵌套的CompositeView?

时间:2012-11-26 23:42:24

标签: javascript jquery backbone.js marionette

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

但是,我在将CompositeViews嵌套在一起时遇到了很多困难。使用CompositeView上的标准itemView属性来渲染另一个CompositeView似乎根本没有触发。

假设我有一个父ItemView ,如此实例化(在Derick Bailey's example之后;假设这个顶级是调用该集合的初始fetch()):< / p>

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,但由于嵌套的CompositeViews,我不确定这样做的正确方法是什么。

作为参考,这里是我想要实现的结构的粗略模型;如果有可能比嵌套的CompositeViews有更好的方式来达到这个目标,我当然都是耳朵:

http://jsfiddle.net/KAWB8/

1 个答案:

答案 0 :(得分:16)

尤里卡!我被deven98602设置在正确的道路上。

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

也就是说,更新的 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()将按预期触发,并在此新设置的集合中呈现每个新模型。