如何使用 Backbone.Marionette 处理嵌套的 CompositeView? [英] How to handle nested CompositeView using Backbone.Marionette?
问题描述
我正在使用 Backbone 进入更大规模的数据结构，并遇到数据可以通过 CompositeViews 很好地表示的场合；也就是说，在 CollectionViews 周围添加了添加的绒毛"，例如标题、按钮等.
但是，我在将 CompositeView 相互嵌套时遇到了很多困难.在 CompositeView 上使用标准 itemView 属性来呈现另一个 CompositeView 似乎根本没有触发.
假设我有一个 父 ItemView，这样实例化(遵循 Derick Bailey 的例子；假设这个顶层是集合上的初始 fetch() 将被调用的地方):
var User = Backbone.Model.extend({});var UserCollection = Backbone.Collection.extend({型号:用户});var userList = new UserCollection(userData);var schedulerCompositeView = new SchedulerCompositeView({集合:用户列表});schedulerCompositeView.render();this.ui.schedulerWidget.html(schedulerCompositeView.el);并且 SchedulerCompositeView 看起来像这样:
return Backbone.Marionette.CompositeView.extend({模板:Handlebars.compile(schedulerCompositeViewTemplate),itemView: SchedulerDetailCompositeView,appendHtml: 函数 (collectionView, itemView) {collectionView.$("#schedulerGroups").append(itemView.el);}});最后，SchedulerDetailCompositeView:
return Backbone.Marionette.CompositeView.extend({模板:Handlebars.compile(schedulerDetailCompositeViewTemplate),itemView:SchedulerDetailItemView，appendHtml: 函数 (collectionView, itemView) {collectionView.$("#schedulerDetailStops").append(itemView.el);}});SchedulerDetailCompositeView 永远不会被实例化；事实上，它的 appendHtml() 方法似乎从不触发.
显然这里还缺少一些其他信息；显然，目的是将集合/模型传递给 SchedulerDetailCompositeView，但由于嵌套的 CompositeViews，我不确定这样做的正确技术是什么.
作为参考，这是我试图实现的结构的粗略模型；如果有比嵌套的 CompositeViews 更好的方法来达到这个目标，我当然全神贯注:
尤里卡！我被 deven98602 设定在正确的道路上.
要记住的关键是，如果您嵌套多个 CompositeView(或 CollectionView)，则每个向下的级联级别将代表从其父级开始的集合的一个单元；也就是说，我之前的 SchedulerDetailCompositeView 表示 SchedulerCompositeView 中集合中的单个模型.因此，如果我正在构建嵌套的 CompositeViews(大概是基于深度嵌套的数据)，我必须重新定义这些级联子级的集合，因为它们只有一个关联的模型，而不是要呈现的正确集合.
也就是说，更新后的 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:
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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
