主干子路由器到特定视图
Backbone Subrouter to specific view
是否可以将子路由器添加到特定视图?假设我有一个适用于多辆汽车的骨干应用程序。现在,我的路由器看起来像这样
carRouter = Backbone.Router.extend({
routes: {
'': 'index'
'contact' : 'contact'
':car': 'car',
':car/gallery' : 'cargallery',
':car/specs' : 'specs',
':car/infos' : 'infos',
'about: 'aboutPage'
}
car: function(){
// do this
},
cargallery: function(){
// do this
},
specs: function(){
// do this
},
infos: function(){
// do this
}
...etc
});
这种方法显然使整个页面呈现,我基本上想要避免这种情况。例如,当我来回单击"图库"和"规格"时,每次单击时整个页面都会重新呈现。
那么,是否可以执行以下操作:
routes: {
'contact' : 'contact'
':car': 'car',
'about: 'aboutPage'
},
car: function(){
// new router containing
// ':car/gallery' : 'cargallery',
// ':car/specs' : 'specs',
// ':car/infos' : 'infos',
},
}
然后,在汽车页面上,我将在菜单中有 3 个选项卡(图库、规格、信息),这些选项卡将加载特定汽车的模型/集合,而无需重新渲染页面?
任何帮助/建议不胜感激!
您可以使用事件,主干触发器和自定义事件处理程序对象来实现此目的。
CarView 中的事件哈希
:events : {
"click .spec" : "showSpecs",
"click .gallery" : "showGallery",
"click .info" : "showInfo",
},
//Invoked when you click the show specs tab.
showSpecs : function(event) {
//Say that EventBus is your custom event handler
event.preventDefault();
MyApp.EventBus.trigger("show:spec",payload);
},
showGallery : function(event) {
event.preventDefault();
MyApp.EventBus.trigger("show:gallery",payload);
}
....
在MyApp.EventBus中:
_.extend(MyApp.EventBus,Backbone.Events);
MyApp.EventBus.showGallery = function(payload) {
// payload is an optional data that you can get from the triggered view
// Fetch your models or collection
// Instantiate the corresponding view and pass your data(models/collections) to it.
// Update the url to reflect the new view so that if you hit refresh you
// come to the same tab.
MyApp.router.navigate("/your-url",{trigger:false});
}
MyApp.EventBus.on("show:gallery",showGallery);
还要在路由器中添加一个可以处理选项卡刷新的方法。
相关文章:
- 如何在ui路由器angularjs中只更改子ui视图,同时保持父视图不变
- 在UI路由器中以抽象状态填充常见视图
- angularjs中带有ui路由器的嵌套视图
- Ui路由器:获取控制器中视图的名称
- 在Angular ui路由器中,如何将事件从一个视图发送到另一个视图
- 如何加载嵌套3个状态的UI路由器UI视图模板
- 访问url[材质Ui+选项卡]时,Angular Ui路由器未加载视图
- 状态更改期间角度UI路由器中的嵌套视图滞后
- ui路由器中基于查询的同级视图路由
- 视图和路由器之间的主干关系
- 角度 ui 视图(UI 路由器)未呈现模板 - 包括 plunker
- Ember.js路由器,从视图获取路由器
- Angular 1.3+ui路由器+生成器ng poly嵌入嵌套(?)视图不起作用
- 在AngularJS UI路由器中动态更改视图
- UI路由器继承视图
- 更改状态时保持同级ui视图-ui路由器
- Ui路由器:复合视图渲染视图一次
- AngularJS UI路由器,部分视图和来自浏览器地址栏的调用视图
- 主干子路由器到特定视图
- Angular UI中的子视图路由器和控制器继承