如何使用Backbone.Marionette处理嵌套CompositeView中？ [英] How to handle nested CompositeView using Backbone.Marionette?

问题描述

我进入与骨干大规模的数据结构，以及跨场合数据将是良好的再经由CompositeViews psented $ P $来;即，通过加入补充起毛它们周围CollectionViews，如头，按钮等。

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.

不过，我有内部彼此有很多困难嵌套CompositeViews的。在CompositeView中的使用标准ItemView控件属性来渲染另一个CompositeView中似乎并没有在所有射击。

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.

假设我有一个父ItemView控件，实例化本身（以下<一个href=\"http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/\">Derick贝利的例子;假设这个顶层是其中的初始取（）的集合将被称作）：

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);

和 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 never gets instantiated; in fact, its appendHtml() method never seems to fire at all.

显然有一些其他的信息在这里失踪;显然意图是一家集/模型传递到SchedulerDetailCompositeView，但我真的不知道什么这样做，由于嵌套CompositeViews适当的技术。

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.

有关参考，在这里就是我想实现结构的粗略样机;如果有可能是实现这一目标比嵌套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/

推荐答案

尤里卡！我经deven98602正确的路径设置。

Eureka! I was set upon the correct path by deven98602.

要记住的关键是，如果你嵌套多个CompositeViews（或CollectionViews），每个级联级下调将重新present设定从其父的一个单位;也就是说，我的 SchedulerDetailCompositeView 从之前重新$ P $，将集合中的 SchedulerCompositeView psents一个单一的模式。所以，如果我构建嵌套CompositeViews（presumably基于深度嵌套的数据），我必须重新定义这些级联孩子的集合，因为他们只有一个与之关联的单一模式，而不是一个适当的集合呈现

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.

这是说，更新后的 SchedulerDetailCompositeView 看起来这样的：

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);
    }
});

一旦收集设置， appendHtml（）火灾预期，并使每款新车型这个新设置的收藏。

Once the collection is set, appendHtml() fires as expected and renders each new model in this newly-set collection.

这篇关于如何使用Backbone.Marionette处理嵌套CompositeView中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！