Gestión de las vistas con los routers en Backbone.js

Question

estoy trabajando en una sola aplicación página que tiene la siguiente distribución:

Estoy usando un router Backbone.js para gestionar los elementos que se cargan en el pantalla:

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     ""    : "list", 
     "content1"  : "content1", 
     "content1/cont3": "cont3" 
    }, 

    list: function() { 
     var list = new List().render().$el; //view 
     $("#List").html(list); 
    }, 

    content1: function(){ 
     var cont1 = new Content1().render().$el; //view 
     $("#Content1").html(cont1); 
    }, 

    content3: function(){ 
     var cont3 = new Content3().render().$el; //view 
     $("#Cont3").html(cont3); 
    }   

}); 

Cada vez que hago clic en un elemento de lista en #Lista, # Content1 se genera, y cuando lo hago en los bloques en Content1 #, # aparece CONT3.

El problema que estoy enfrentando es que, si por alguna razón, actualizo la página cuando la dirección es localhost/content1, por ejemplo; los elementos en #Lista desaparecen.

Quiero que el contenido en #List esté siempre presente cuando se cargue, independientemente de lo que pueda ser la url, así como del contenido en # Content1. ¿Hay alguna manera de lograr esto usando enrutadores troncales?

Gracias

Answer 1

No es necesario para que coincida con la ruta 1 < -> 1 Vista.
que cambiaría las rutas a algo como esto:

"lista": "displayContent",
"Lista /: c1": "displayContent",
"Lista /: c1 /: c3" : "displayContent",

Por lo tanto, es solo una devolución de llamada la que organiza qué vistas se representan o no.

displayContent: function (C1, C3) {

almacenar la variable Content1, y comprobar si ya se ha rendido o no, etc.

un vistazo a esta pregunta: How to handle initializing and rendering subviews in Backbone.js?

O para aplicaciones más complejas, tal vez un marco de diseño en la parte superior de Backbone podría ayudar, aunque recomendaría hacer sus propias cosas hasta que comprenda cómo funciona Backbone.

https://github.com/tbranyen/backbone.layoutmanager
https://github.com/derickbailey/backbone.marionette

Answer 2

creo que se puede probar esto:

..... 
    list: function() { 
     var list = new List().render().$el; //view 
     $("#List").html(list); 
    }, 

    content1: function(){ 
     var cont1 = new Content1().render().$el; //view 
     $("#Content1").html(cont1); 
     //Pseudo code 
     if (listisempty){ 
      list();//If the list is empty, then the initialization list. 
     }; 
    }, 

.....