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

我正在通过Backbone进入更大规模的数据结构，并且遇到了通过CompositeViews可以很好地表示数据的场合;也就是CollectionViews，在它们周围添加“添加绒毛”，比如标题，按钮等等。如何使用Backbone.Marionette处理嵌套CompositeView？

但是，我在嵌套复合视图的过程中遇到了很多困难。使用CompositeView上的标准itemView属性来渲染另一个CompositeView似乎根本不会触发。

假设我有一个父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，但由于嵌套的CompositeViews，我不确定这样做的正确方法。

作为参考，这里是我尝试实现的结构的粗略模型;如果有可能是一个更好的方式比嵌套CompositeViews达到这个目标，我一定洗耳恭听：

http://jsfiddle.net/KAWB8/

来源

2012-11-26 J. Ky Marsh

在SchedulerDetailCompositeView初始化函数中，您将显式地为this.collection赋值，即告诉复合视图关于它处理的集合。像在[treeview]（http://jsfiddle.net/derickbailey/AdWjU/）小提琴 – deven98602

这似乎没有足够的信息。即使在通过initialize方法分配集合之后，SchedulerDetailCompositeView上的appendHtml实际上也不会触发。初始化确实，但appendHtml没有。 –

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

要记住的关键是，如果你嵌套多个CompositeViews（或CollectionViews），每个级联级别下降将代表其父母的集合的单位;也就是我以前的SchedulerDetailCompositeView表示来自SchedulerCompositeView集合中的单个模型。因此，如果我构建嵌套复合视图（可能基于深度嵌套数据），我必须重新定义这些级联子集上的集合，因为它们只有与它们关联的单个模型，而不是合适的集合来呈现。

这就是说，更新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()火灾预期，并呈现每款新车型这个新设置的收藏。

来源

2012-11-27 23:29:18

我希望木偶（/ Backbone）能够为我处理这个问题，但事实并非如此。 +1问题和答案 – Bojangles

我不会定义一个本地类但每次加载。这非常浪费。 – demonkoryu

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

回答

相关问题