Gestion des vues avec des routeurs dans Backbone.js

Question

Je travaille dans une application unique page qui a la mise en page suivante:

J'utilise un routeur Backbone.js pour gérer les éléments qui se chargent de la écran:

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

}); 

Chaque fois que je clique sur un élément de liste dans #Liste, # Content1 est généré, et quand je le fais sur les blocs sur # Content1, # CONT3 apparaît.

Le problème auquel je suis confronté est que si, pour une raison quelconque, je rafraîchis la page lorsque l'adresse est localhost/content1, par exemple; les éléments de #List disparaissent.

Je souhaite que le contenu de #List soit toujours présent lorsqu'il est chargé, quel que soit l'URL, ainsi que le contenu de # Content1. Y at-il un moyen d'y parvenir en utilisant des routeurs backbone?

Merci

Answer 1

Vous n'avez pas besoin de faire correspondre 1 route < -> 1 Voir.
je changerais les routes à quelque chose comme ceci:

"liste": "displayContent",
"liste /: c1": "displayContent",
"liste /: c1 /: c3" : "displayContent",

Donc, ce n'est qu'un callback celui qui organise ce que les affichages sont rendus ou non.

displayContent: function (c1, c3) {

Stocke la variable en content1, et vérifier si elle a été rendue déjà ou non, etc.

Jetez un oeil à cette question: How to handle initializing and rendering subviews in Backbone.js?

Ou pour des applications plus complexes, peut-être qu'un framework de mise en page en haut de Backbone pourrait vous aider, bien que je vous recommande de faire vos propres trucs jusqu'à ce que vous compreniez comment fonctionne Backbone.

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

Answer 2

Je pense que vous pouvez essayer ceci:

..... 
    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. 
     }; 
    }, 

.....