在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 个路由 <-> 1 个视图。
我会将路线更改为如下所示：

“列表”：“显示内容”，
“列表/：c1”：“显示内容”，
“列表/：c1 /：c3”：“显示内容”，

因此，这只是一个回调，用于组织渲染或不渲染哪些视图。

显示内容：函数（c1，c3）{

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

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

或者对于更复杂的应用程序，也许 Backbone 之上的布局框架会有所帮助，尽管我建议您自己做一些事情，直到您了解 Backbone 的工作原理。

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