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

【问题标题】：Managing views with routers in Backbone.js在 Backbone.js 中使用路由器管理视图
【发布时间】：2012-07-10 01:34:55
【问题描述】：

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

我正在使用 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 中的内容。有没有办法使用骨干路由器来实现这一点？

谢谢

【问题讨论】：

标签： backbone.js backbone-views backbone-routing

【解决方案1】：

您不需要匹配 1 个路线 1 个视图。
我会将路线更改为这样的：

"list": "displayContent",
"list/:c1": "displayContent",
"list/:c1/:c3": "displayContent",

所以只有一个回调来组织视图渲染或不渲染。

显示内容：函数（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

【讨论】：

Gracias @corbacho，我按照我的方式解决了这个解决方案，它给了我预期的结果。

【解决方案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.
        };
    },

.....

【讨论】：