Question

我坚持使用大型骨干应用程序。

它在主应用程序中运行不同的应用程序。我们希望将应用程序以及路由异步添加到大应用程序中。

我现在所做的是在加载主应用程序后，与Require.JS异步添加不同的应用程序。要将新路由添加到主路由，我将停止历史记录并添加新路由并重新开始历史记录。这有效，但它有一个主要缺点。每次我去（app.navigate（'x'，true）;）一个新的现有路径会像我有历史记录一样多次触发路由。启动它。所有视图都呈现。

这会大大减慢应用程序的速度，效率非常低。

有没有办法动态添加新路由而不必使用history.stop / start？

Answer 1

每次添加新路由时都不必停止/启动Backbone.history，Backbone会在您调用router.route或创建新路由器时修改其状态。

因此，手动将路由添加到路由器：

var R = Backbone.Router.extend({
    routes: {
    }
});

var r = new R();
Backbone.history.start();

r.route('added', 'added', function() {
    console.log('added : '+window.location.hash);
});

或实例化新路由器

var R = Backbone.Router.extend({
  routes: {
  }
});

var r = new R();
Backbone.history.start();

var R2 = Backbone.Router.extend({
    routes: {
        'added': 'added'
    },
    added: function() {
        console.log('added: '+window.location.hash);
    }
});
var r2 = new R2();

和演示

var R = Backbone.Router.extend({
  routes: {
    "help": "help"
  },
  help: function() {
      console.log('help : '+window.location.hash);
  }
});


var r = new R();
Backbone.history.start();
r.navigate('help', {trigger: true});


var R2 = Backbone.Router.extend({
  routes: {
    "r2": "r2"
  },
  r2: function() {
    console.log('r2 : '+window.location.hash);
  }
});
var r2 = new R2();
r2.navigate('r2', {trigger: true});


r.route('added', 'added', function() {
    console.log('added : '+window.location.hash);
});

r.navigate('added', {trigger: true});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

<a href='#help'>help</a>
<a href='#r2'>r2</a>
<a href='#added'>added</a>

Answer 2

我写了一个带路由器的小.js文件。它应该可用于不同的目的，因此您可以在init上传递所需的回调（路由）。 init采用参数路由（数组），其中包含以下信息：

routeId:"book/:id",
routeName:"routeBooks",
routeCallback: $.proxy(function(id){ 
 // $.proxy() is a jQuery function that ensures you call the callback in the right context
      // do fandy stuff here.
})

要解析路由，我使用以下命令：

for( route in routes ){
    routesFromConfig[routes[route].routeId.toString()] = routes[route].routeName;
}
var ModalRouter = Backbone.Router.extend({
    routes:routesFromConfig
});
router = new ModalRouter();
for( route in routes ){
    // test if the callback is a function
    if(_.isFunction(routes[route].routeCallback)){
        router.on('route:'+routes[route].routeName.toString(), routes[route].routeCallback);
    }
}

Backbone.history.start();

我希望这有助于根据从您应用中的其他位置传递的路线设置路由器

异步添加骨干路由。

2 个答案: