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

也就是说，更新后的 SchedulerDetailCompositeView 看起来像这样:return Backbone.Marionette.CompositeView.extend({模板:Handlebars.compile(schedulerDetailCompositeViewTemplate),itemView:SchedulerDetailItemView，初始化:函数(){var Load = Backbone.Model.extend();var LoadCollection = Backbone.Collection.extend({型号:负载});//这个负载数组，嵌套在我的 JSON 数据中，代表//使用 SchedulerDetailItemView 呈现为模型的新集合var loadList = new LoadCollection(this.model.get("loads"));this.collection = loadList;},appendHtml: 函数 (collectionView, itemView) {collectionView.$("#schedulerDetailStops").append(itemView.el);}});一旦集合被设置，appendHtml() 就会按预期触发并渲染这个新设置的集合中的每个新模型.I'm getting into larger-scale data structures with Backbone, and coming across occasions where data would be well-represented via CompositeViews; that is, CollectionViews with the addition of "added fluff" around them, such as headers, buttons, and so on.However, I'm having a lot of difficulty nesting CompositeViews inside one another. Using the standard itemView property on a CompositeView to render another CompositeView doesn't seem to be firing at all.Assume I have a parent ItemView, instantiated as such (following Derick Bailey's example; assume this top level is where the initial fetch() on the collection would be called):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 SchedulerCompositeView looks as such:return Backbone.Marionette.CompositeView.extend({ template: Handlebars.compile(schedulerCompositeViewTemplate), itemView: SchedulerDetailCompositeView, appendHtml: function (collectionView, itemView) { collectionView.$("#schedulerGroups").append(itemView.el); }});And finally, SchedulerDetailCompositeView:return Backbone.Marionette.CompositeView.extend({ template: Handlebars.compile(schedulerDetailCompositeViewTemplate), itemView: SchedulerDetailItemView, appendHtml: function (collectionView, itemView) { collectionView.$("#schedulerDetailStops").append(itemView.el); }});SchedulerDetailCompositeView never gets instantiated; in fact, its appendHtml() method never seems to fire at all.Clearly there's some other information missing here; obviously the intent is to pass a collection/model to SchedulerDetailCompositeView, but I'm not really sure what the proper technique for doing so is, due to the nested CompositeViews.For reference, here's a rough mockup of the structure I'm trying to achieve; if there might be a better manner for reaching this goal than nested CompositeViews, I'm certainly all ears:http://jsfiddle.net/KAWB8/ 解决方案 Eureka! I was set upon the correct path by deven98602.The key to remember is that, if you're nesting multiple CompositeViews (or CollectionViews), each cascading level down will represent one unit of the set from its parent; that is, my SchedulerDetailCompositeView from before represents a single model from the collection in SchedulerCompositeView. Therefore, if I'm constructing nested CompositeViews (presumably based on deeply-nested data), I must redefine a collection on these cascaded children, as they only have a single model associated with them, and not a proper collection to render.That said, the updated SchedulerDetailCompositeView looks as such: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); }});Once the collection is set, appendHtml() fires as expected and renders each new model in this newly-set collection. 这篇关于如何使用 Backbone.Marionette 处理嵌套的 CompositeView?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！