模块化和多视图的骨干路由

时间:2013-03-28 19:52:48

标签: javascript backbone.js backbone-routing

所以我对我的Backbone路由设计有点困惑,并试图看看其他人认为或试图解决这个问题的其他人。

基本问题是我正在编写一个具有多个视图的应用程序,以及每个视图中的嵌套视图,并试图避免使用一个骨干路由器来控制这些视图和嵌套视图的状态。

问题的例子是:

Backbone.Router.extend({ routes: 
'view1' : ..., 'view2Nested': ..., 
'View2NestedNested' ...});

查看布局:

  • 视图1
    • View1Nested
  • 视图2
    • View2Nested
    • View2NestedNested

在这个配置中,路由器现在必须关于View2NestedNested,以便向它发送任何动作信息,这可能意味着主路由器必须持有对视图的引用或了解view2并获取它对view2Nested的引用,并要求查看view2NestedNested。

1 个答案:

答案 0 :(得分:0)

我的方法是创建视图,并引用它的父级。

所以基本上你的观点看起来像这样:

var ViewAA = Backbone.View.extend({
    initialize: function(options) {
         this.parent = options.parent
    },

    render: function() {
         this.parent.router.navigate("viewA/viewAA");
    }
});

var ViewA = Backbone.View.extend({
    initialize: function(options) {
         this.router = options.router
    },

    render: function() {
       this.nestedView = new ViewAA({ parent: this });
    }
});

var router = new Router();

var viewA = new ViewA({ router: router });

我在更复杂的应用程序中使用的第二种方法是使用ONE全局变量......它看起来像这样:

var ViewAA = Backbone.View.extend({
    initialize: function(options) {

    },

    render: function() {
         app.router.navigate("viewA/viewAA");
    }
});

app = {
    router: new Router(),
    classes: {
        ViewA: Backbone.View.extend({ ... }),
        ViewAA: Backbone.View.extend({ ... })
    },
}

app.viewA = new app.classes.ViewA();
app.viewAA = new app.classes.ViewAA();

提示:使用RequireJS和AMD方法总是更好,所以你可能也想尝试一下。