Backbone - 在子路由函数之前执行路由函数

Backbone - Execute route function before subroute's function

在 backbone 路由器中使用以下代码,是否可以确保当用户直接导航到 #test/map#test/images 时,附加到路由的函数 #test先执行?

invokeTest 函数创建一个父视图,其中包含呈现子视图 "map" 和 "images" 的容器。所以我需要确保在跳转到渲染子视图之前渲染了基本布局视图。

var Workspace = Backbone.Router.extend({
  routes: {
    "test":                 "invokeTest",    // #test
    "test/map":        "invokeTestMap",  // #test/map
    "test/images": "invokeTestImages"   // #test/images
  },

  invokeTest: function() {
    //render base-layout
    console.log("test function executed");
  },

  invokeTestMap: function() {
    //render map view using element created with the base layout template
    console.log("Map function executed");
  },
  invokeTestImages : function(){
  //render images view using element created with the base layout template
  console.log("images function executed");
  }

});

现在我只得到子视图的控制台日志,从未调用根函数。

你可以这样做:

  invokeTest: function() {
    //render base-layout
    createBaseLayout();
    console.log("test function executed");
  },

  invokeTestMap: function() {
    createBaseLayout();
    //render map view using element created with the base layout template
    console.log("Map function executed");
  },
  invokeTestImages : function(){
    createBaseLayout();
    //render images view using element created with the base layout template
    console.log("images function executed");
  }

或者你也可以这样做

invokeTestMap: function() {
    this. invokeTest();
    //render map view using element created with the base layout template
    console.log("Map function executed");
  },

简单的说就是把需要复用的逻辑放在一个函数中调用。

如果您必须大规模执行此操作,在路由器的 initialize 中,您可以使用正则表达式识别父子关系,并将子回调更新​​为包含父回调的函数。 (或者你可以更深入地研究路由器——似乎有插件试图解决类似的问题,比如 backbone.subroute