Vues imbriquées backbone

Question

Je travaille sur une application Backbone et je ne suis pas sûr que la façon dont j'essaie de faire est la bonne façon.

J'ai une vue d'application et dans cette vue d'application j'essaye d'ajouter une vue de collection, et chaque vue dans cette collection est aussi une collection. Permettez-moi d'expliquer cela graphiquement.

---------------------------------------------------------------------- 
|                 | 
| Application view            | 
|                 | 
| ------------------------------------------------------------- | 
| | Windows Collection view         | | 
| |               | | 
| | -------------------------- -------------------------- | | 
| | | Tabs collection view | | Tabs collection view | | | 
| | |      | |      | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | | |Tab view| |Tab view| | | |Tab view| |Tab view| | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | |      | |      | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | | |Tab view| |Tab view| | | |Tab view| |Tab view| | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | |------------------------| |------------------------| | | 
| |               | | 
| | -------------------------- -------------------------- | | 
| | | Tabs collection view | | Tabs collection view | | | 
| | |      | |      | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | | |Tab view| |Tab view| | | |Tab view| |Tab view| | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | |      | |      | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | | |Tab view| |Tab view| | | |Tab view| |Tab view| | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | |------------------------| |------------------------| | | 
| |               | | 
| ------------------------------------------------------------- | 
|                 | 
|                 | 
---------------------------------------------------------------------- 

Actuellement, je suis le chargement de la vue de l'application de la méthode initialize dans mon routeur Backbone. Cette vue charge le Windows collection view.

Le problème principal est que je ne suis pas sûr si je suis sur la bonne voie. Le deuxième problème est que je ne suis pas vraiment sûr comment charger chaque Tabs collection view de mon Windows Collecion view.

PS: Juste pour rendre les choses encore plus clair, je suis en train de reproduire la vue panoramique de Firefox: http://i.i.com.com/cnwk.1d/i/tim//2010/08/24/firefox-panorama.jpg

Answer 1

Je poste ici juste ce que les autres puissent voir comment je résolu le problème

Une démonstration de travail de la solution peut être found here (original fiddle).

Comme vous pouvez le voir sur le lien, le travail est fait grâce à CompositeView de Marionette qui permet de rendre les collections de manière récursive.

var TreeView = Backbone.Marionette.CompositeView.extend({ 

    initialize: function(){ 
     if(this.model.tabs){ 
      this.template = "#window-template"; 
     }else{ 
      this.template = "#tab-template"; 
     } 
     this.collection = this.model.tabs; 
    }, 

    appendHtml: function(cv, iv){ 
     cv.$("#tabs").append(iv.el); 
    }, 
    onRender: function() { 
     if(_.isUndefined(this.collection)){ 
      this.$("#tabs").remove(); 
     } 
    } 
}); 

Le petit truc que je utilise dans le initialize (if/else avec le modèle asignation) fonctionne de la manière suivante:

je reçois le modèle actuel et vérifier si elle a un « onglets » clé. Si c'est le cas, cela signifie que le modèle actuel est un modèle de données fenêtre, donc je dois utiliser le window-template, sinon utiliser le tab-template

Le reste est à peu près la structure Backbone.

Answer 2

Je recommande fortement d'utiliser Marionette.js pour structurer votre application.

Il a déjà des vues de collection intégrées qui rendent le rendu facile. Votre application semble être un cas d'utilisation parfait. Vous obtiendrez beaucoup de code standard.