在Backbone.js中使用路由器管理视图

Question

我正在使用具有以下布局的单页应用程序：

我使用Backbone.js路由器来管理屏幕上加载的元素：

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

});

每次我点击#List中的列表项时，都会生成＃Content1，当我在＃Content1上的块上执行时，会出现#Cont3。

我面临的问题是，如果由于某种原因，我在地址为localhost / content1时刷新页面，例如; #List中的元素消失。

我希望#List中的内容在加载时始终存在，与url的内容以及＃Content1中的内容无关。有没有办法使用骨干路由器实现这一目标？

由于

Answer 1

您不需要匹配1条路线＆lt; - ＆gt; 1查看。
我会将路线改为这样的：

  

“list”：“displayContent”，
  “list /：c1”：“displayContent”，
  “list /：c1 /：c3”：“displayContent”，

所以它只是一个回调组织视图被渲染或不被渲染的人。

  

displayContent：function（c1，c3）{

存储content1变量，并检查是否已经渲染，等等。

看一下这个问题：How to handle initializing and rendering subviews in Backbone.js?

或者对于更复杂的应用程序，也许Backbone顶部的布局框架可能有所帮助，尽管我建议你做自己的事情，直到你理解Backbone如何工作。

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

Answer 2

我想你可以试试这个：

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

.....