Как обрабатывать вложенные CompositeView с помощью Backbone.Marionette?

Я попадаю в более крупные структуры данных с Backbone и сталкиваюсь с ситуациями, когда данные будут хорошо представлены через CompositeViews; то есть CollectionViews с добавлением "добавленного пуха" вокруг них, таких как заголовки, кнопки и т.д.

Однако у меня много сложностей, связанных с CompositeViews внутри друг друга. Использование стандартного свойства itemView в CompositeView для отображения другого CompositeView вообще не срабатывает.

Предположим, что у меня есть родительский ItemView, созданный как таковой (следуя пример Derick Bailey; предположим, что этот верхний уровень где будет вызываться начальный 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/

Ответы

Ответ 1

Эврика! Я был установлен на правильный путь by 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() срабатывает, как ожидалось, и отображает каждую новую модель в этой новой коллекции.