Comment manipuler le CompositeView imbriqué avec Backbone.Marionette?

J'entends dans des structures de données à plus grande échelle avec Backbone, et je rencontre des occasions où les données seraient bien représentées via CompositeViews; C'est-à-dire CollectionViews avec l'ajout de "fluff ajouté" autour d'eux, tels que les en-têtes, les boutons, etc.

Cependant, j'ai beaucoup de difficulté à imbriquer les CompositeViews les uns dans les autres. L'utilisation de la propriété itemView standard sur CompositeView pour rendre une autre CompositeView ne semble pas déclencher.

Supposons que j'ai un parent ItemView , instancié en tant que tel (suivant l'exemple de Derick Bailey, supposons que ce niveau supérieur est l'origine de l' fetch() initiale fetch() de la collection):

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

Et SchedulerCompositeView se présente comme tel:

 return Backbone.Marionette.CompositeView.extend({ template: Handlebars.compile(schedulerCompositeViewTemplate), itemView: SchedulerDetailCompositeView, appendHtml: function (collectionView, itemView) { collectionView.$("#schedulerGroups").append(itemView.el); } }); 

Et enfin, SchedulerDetailCompositeView :

 return Backbone.Marionette.CompositeView.extend({ template: Handlebars.compile(schedulerDetailCompositeViewTemplate), itemView: SchedulerDetailItemView, appendHtml: function (collectionView, itemView) { collectionView.$("#schedulerDetailStops").append(itemView.el); } }); 

SchedulerDetailCompositeView ne se fait jamais instancier; En fait, sa méthode appendHtml() ne semble jamais déclencher du tout.

De toute évidence, il y a d'autres informations qui manquent ici; Évidemment, l'intention est de passer une collection / modèle à SchedulerDetailCompositeView, mais je ne suis pas vraiment sûr de la technique appropriée pour ce faire, en raison des CompositeViews imbriqués.

Pour référence, voici une maquette approximative de la structure que j'essaie d'atteindre; S'il peut y avoir une meilleure façon d'atteindre cet objectif que les CompositeViews imbriqués, je suis certainement tous les oreilles:

Http://jsfiddle.net/KAWB8/

Eureka! J'ai été mis sur le chemin correct par deven98602.

La clé à retenir est que, si vous nouez plusieurs CompositeViews (ou CollectionViews), chaque niveau en cascade vers le bas représentera une unité de l'ensemble de son parent; C'est-à-dire que mon SchedulerDetailCompositeView de Before représente un modèle unique de la collection dans SchedulerCompositeView . Par conséquent, si je construis des CompositeViews imbriquées (vraisemblablement basées sur des données profondément ancrées), je dois redéfinir une collection sur ces enfants en cascade, car ils ont seulement un modèle associé à eux et pas une collection appropriée à rendre.

Cela dit, le SchedulerDetailCompositeView mis à jour apparaît comme tel:

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

Une fois la collection définie, appendHtml() déclenche comme prévu et rend chaque nouveau modèle dans cette collection nouvellement établie.