我有一个非常简单的主菜单,有4个锚点和相关的视图。无论如何,在其中一个视图中我想添加一个带有3个标签的小子菜单,点击它们后会显示不同的视图。我想出了如何使用pushState:false
,但我想要的是一个干净的URL。现在,我的网址看起来像http://localhost/myproject/#secondpage/subview1
或http://localhost/myproject/#secondpage/subview2
等等。所以,无论触发哪个子视图/标签,我都知道如何实现http://localhost/secondpage
?
我使用RequireJS和HandlebarsJS(用于HTML模板)
所以现在我的代码(片段)看起来像这样:
Router.js
routes: {
'': 'index',
'firstpage' : 'firstpage',
'secondpage' : 'secondpage',
'secondpage/sub1' : 'sub1',
'secondpage/sub2' : 'sub2',
'secondpage/sub3' : 'sub3',
'thirdpage' : 'thirdpage'
},
Backbone.history.start({
pushState: false
});
我的HTML与锚点:
<ul>
<li>
<a class="sub1" href="#secondpage/sub1">Bands</a>
</li>
<li>
<a class="sub2" href="#secondpage/sub2">Koncert</a>
</li>
<li>
<a class="sub3" href="#secondpage/sub3">Locations</a>
</li>
</ul>
我的视图看起来像
define(['backbone','handlebars', 'text!templates/SubMenu.html'],
function(Backbone,Handlebars, Template) {
'use strict';
var SubMenuView = Backbone.View.extend({
template: Handlebars.compile(Template),
initialize: function () {
_.bindAll(this);
},
render: function() {
$(this.el).html(this.template());
return this;
}
});
return SubMenuView;
}
);
另一件事是:我应该通过设置事件将操作移动到View吗?我有点尝试过,但它没有工作,因为在路由器中定义了视图......
我尝试设置pushState:true
,然后删除路由器中的secondpage/sub1
内容,然后在我的视图中写道:
events: {
'click a.sub1': 'sub1',
},
sub1: function(event) {
event.preventDefault();
var sub1Router = new Backbone.Router();
var route = '/secondpage/';
sub1Router.navigate(route, {trigger: true});
},
但是没有用,这给了我找不到网址所以......
欢迎任何帮助!提前谢谢......
[UPDATE] 好的,所以根据请求,这是我的(新)路由器:
var Router = Backbone.Router.extend({
routes: {
'': 'index',
'firstpage' : 'firstpage',
'secondpage' : 'secondpage',
'thirdpage' : 'thirdpage'
},
initialize: function () {
var self = this;
//Views
this.mainMenuView = new MainMenuView({el:'#mainMenu'}).render();
this.subMenuView = new SubMenuView();
Backbone.history.start({
pushState: true
});
},
index: function () {
var self = this;
},
firstpage: function() {
this.firstpageView = new FirstpageView({el:'#topContent'}).render();
},
secondpage: function() {
this.secondpageView = new SecondpageView({el:'#topContent'}).render();
this.subMenuView = new SubMenuView({el:'#subMenu'}).render();
},
thirdpage: function() {
var thirdpageView = new ThirdpageView({ el:'#topContent', collection:this.categoryCollection}).render();
},
sub1: function() {
this.sub1View = new Sub1View({el:'#subContent_2'}).render();
},
sub2: function() {
this.sub2View = new Sub2View({el:'#subContent_2'}).render();
},
sub3: function() {
this.sub3View = new Sub3View({el:'#subContent_2'}).render();
}
});
return Router;
}
我的(新)视图如下:
var SubMenuView = Backbone.View.extend({
template: Handlebars.compile(Template),
events: {
'click .sub1': 'sub1',
'click .sub2': 'sub2',
'click .sub3': 'sub3',
},
sub1: function(event) {
var sub1Router = new Backbone.Router();
var route = '/secondpage';
sub1Router.navigate(route, {trigger: true});
},
sub2: function(event) {
event.preventDefault();
var sub2Router = new Backbone.Router();
var route = '/secondpage';
sub2Router.navigate(route, {trigger: true});
},
sub3: function(event) {
event.preventDefault();
var sub3Router = new Backbone.Router();
var route = '/secondpage';
sub3Router.navigate(route, {trigger: true});
},
initialize: function () {
_.bindAll(this);
},
render: function() {
$(this.el).html(this.template());
return this;
}
});
return SubMenuView;
我的(新)HTML模板:
<ul>
<li>
<a class="sub1" href="/secondpage/">Sub1</a>
</li>
<li>
<a class="sub2" href="/secondpage/">Sub2</a>
</li>
<li>
<a class="sub3" href="/secondpage/">Sub3</a>
</li>
</ul>
希望这可以提供更多的输入/建议......这真的让我疯狂,这让我考虑使用.show()和.hide()jquery方法,即使我真的不想......
答案 0 :(得分:0)
您所描述的是骨干路由如何工作,您使用'/ secondpage / sub1'并使用服务器路由,或使用'#secondpage / sub1'并命中骨干路由。无论哪种方式,地址栏都会使用您的网址进行更新。
另一种选择是在视图中使用事件,处理点击事件并相应地更新视图的模板。
但是,如果您打算使用路线,那么可以查看clickify.js。我还没有自己使用它,虽然我已将它标记为可能的未来使用...听起来它可能会做你想要的。
答案 1 :(得分:0)
尝试在路由器中使用它:
Backbone.history.navigate('secondpage');
完成所有工作后(获取模型,渲染视图)