我有一個非常簡單的主菜單,有4個錨點和相關的視圖。無論如何,在其中的一個意見中,我想添加一個帶有3個選項卡的子菜單,點擊它們後,它們會顯示不同的視圖。我想通過pushState:false
怎麼做,但我想要的是一個乾淨的URL。現在,我的網址看起來像http://localhost/myproject/#secondpage/subview1
或http://localhost/myproject/#secondpage/subview2
等等。所以有人知道我怎麼做http://localhost/secondpage
無論哪個子視圖/標籤被觸發?BackboneJS - 子視圖導航
進出口使用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;
}
);
另一件事是:我應該通過設置事件將動作移動到視圖?我有點試過,但是因爲視圖是在路由器中定義它沒有工作......
我想什麼是設置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});
},
,但沒有工作,這給了我找不到網址所以...
歡迎任何幫助!在此先感謝...
[更新] 好了,按要求,這裏是我的(新)路由器:
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方法,即使我真的不想要...
嗯,也許我不是很清楚。我寧願避免使用一些腳本來實現這種功能,這可能應該可以以明確的主幹方式完成...... – SHT