Routing backbone con subviews

Question

Sono curioso di sapere come le persone affrontano una situazione come questa. Ho un'applicazione che in un percorso come "/ categories" mostra un elenco di categorie. Quando si fa clic su ogni categoria, viene visualizzato un elenco di prodotti in quella categoria e il percorso si aggiorna a qualcosa come "/ categories/1/products". Se navigo in un punto e poi clic sul pulsante Indietro, dovrei essere in grado di visualizzare solo la visualizzazione elenco prodotti per la categoria precedente, senza re-rendering della vista categorie.

Tuttavia, devo anche assicurarmi che quando navigo direttamente in "/ categories/2/products" venga visualizzato sia l'elenco delle categorie sia l'elenco dei prodotti.

Fondamentalmente, significa che il router dovrebbe rispondere in modo diverso alla navigazione della cronologia di back/forward piuttosto che accedere direttamente a un URL. C'è una soluzione comune a questo tipo di problema?

Answer 1

Sì, le sezioni secondarie devono essere chiamate sempre dopo la creazione del genitore, non importa se è stato effettuato l'accesso tramite url diretto o tramite una navigazione del router.

La mia soluzione alternativa è sempre avere una vista principale nelle mie applicazioni e il router chiama sempre questa vista principale. Il router non ha accesso ad altre viste. Nella mia vista principale potrei gestire il caso in cui una vista genitore è stata creata o meno.

esempio, verificare come il router chiamate solo MainView e là ho un metodo chiamato validateCategories che creano la vista padre, se necessario:

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

Inoltre, se avete intenzione di ripartire da zero un nuovo progetto non dimentica di dare un'occhiata a questa estensione che ti aiuta ad organizzare i tuoi progetti Backbone.js: https://github.com/derickbailey/backbone.marionette