Enrutamiento del backbone con las subvistas

Question

Tengo curiosidad por cómo las personas manejan una situación como esta. Tengo una aplicación que en una ruta como "/ categorías" muestra una lista de categorías. Cuando se hace clic en cada categoría, aparece una lista de productos en esa categoría y la ruta se actualiza a algo como "/ categories/1/products". Si navego por algunos y luego hago clic en el botón Atrás, debería poder renderizar la vista de lista de productos para la categoría anterior, sin volver a representar la vista de categorías.

Sin embargo, también debo asegurarme de que cuando navegue directamente a "/ categories/2/products" se muestre la lista de categorías y la lista de productos.

Básicamente, significa que el enrutador tendrá que responder de manera diferente a la navegación del historial de retroceso/avance que al acceder directamente a una URL. ¿Hay una solución común para este tipo de problema?

Answer 1

Sí, las secciones secundarias se deben invocar siempre después de crear el elemento primario, no importa si se accedió mediante la URL directa oa través de la navegación del enrutador.

Mi solución para esto siempre es tener una vista principal en mis aplicaciones, y el enrutador siempre llama a esta vista principal. El enrutador no tiene acceso a otras vistas. En mi vista principal, pude manejar el caso donde se crea o no una vista principal.

ejemplo, comprobar cómo el router sólo se llama MainView y no tengo un método denominado validateCategories que crean la vista padre si es necesario:

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

Además, si usted va a empezar desde cero un nuevo proyecto no hacer olvídate de echarle un vistazo a esta extensión que te ayudará a organizar tus proyectos Backbone.js: https://github.com/derickbailey/backbone.marionette