Routage de backbone avec sous-vues

Question

Je suis curieux de savoir comment les gens font face à une telle situation. J'ai une application qui à une route comme "/ categories" affiche une liste de catégories. Lorsque vous cliquez sur chaque catégorie, une liste de produits de cette catégorie s'affiche et l'itinéraire est mis à jour vers quelque chose comme "/ categories/1/products". Si je navigue certains et que je clique sur le bouton de retour, je devrais être capable de simplement afficher la vue de la liste des produits pour la catégorie précédente, sans rendre le rendu de la vue des catégories.

Cependant, je dois également m'assurer que lorsque je navigue directement dans "/ categories/2/products" la liste des catégories ainsi que la liste des produits sont rendues. Fondamentalement, cela signifie que le routeur devrait répondre différemment à la navigation historique en arrière/en aval plutôt qu'à l'accès direct à une adresse URL. Existe-t-il une solution commune à ce type de problème?

Answer 1

Oui, les sections enfants doivent toujours être appelées après la création du parent, cela n'a pas d'importance si vous y accédez par URL directe ou via une navigation de routeur.

Mon contournement à ceci est toujours avoir une vue principale dans mes applications, et le routeur appelle toujours cette vue principale. Le routeur n'a pas accès à d'autres vues. Dans ma vue principale, je pouvais gérer le cas où une vue parent est créée ou non.

Exemple, vérifier comment le routeur appelle seulement MainView et là je une méthode nommée validateCategories qui créent la vue parent si nécessaire:

var MainView = Backbone.View.extend({ 
    id : 'mainView', 
    categories : null, 

    events : { 
    }, 

    initialize : function(){ 
     _.bindAll(this); 
    }, 

    openSection : function(section){ 
     switch(section){ 
      case 'categories': 
       this.validateCategories(); 
       break; 
      case 'products': 
       this.validateCategories(); 
       this.categories.open(new ProductsView()); 
       break; 
     } 
    }, 
    validateCategories : function(){ 
     if(!this.categories){ 
      //we create the parent view only if not yet created 
      this.categories = new CategoriesView(); 
     } 
    } 
}); 
var mainView = new MainView(); 
var RouterClass = Backbone.Router.extend({ 

    routes : { 
    "categories" : "viewCategories", 
    "categories/:id/:section" : "viewProducts" 
    }, 

    viewCategories : function(path) { 
    mainView.openSection('categories'); 
    }, 

    viewProducts : function(id, section){ 
    mainView.model.set({ 
     productId : id, 
     section : section, 
    }); 
    mainView.openSection('products'); 
    } 
}); 

Aussi, si vous allez commencer à partir de zéro un nouveau projet ne pas oubliez de jeter un oeil sur cette extension qui vous aide à organiser votre Backbone.js Projets: https://github.com/derickbailey/backbone.marionette