backbone.js - 在 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 个视图。
我会将路线更改为以下内容：

“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

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

.....