支持模块化和多视图的主干路由

Backbone routing for modular and multiple views

本文关键字：路由 视图 模块化 支持      更新时间：2023-09-26

所以我在我的骨干路由设计有点进退两难，我试图看看其他人的想法或试图做什么来解决这个问题。

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

问题的例子是:

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

视图布局:

  • View1
    • View1Nested
  • View2
    • View2Nested
    • View2NestedNested

在这个配置中，路由器必须现在关于View2NestedNested以便向它发送任何操作信息，这可能意味着主路由器必须持有对视图的引用或知道view2并获取它对view2Nested的引用，并向该视图请求View2NestedNested

我的方法是创建一个引用到它的父视图。

基本上你的视图是这样的:

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

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

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的方法总是更好，所以你可能也想尝试一下。

相关文章：