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。
在 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。