저는 4 개의 앵커가있는 매우 간단한 메인 메뉴와 관련보기가 있습니다. 아무튼 그보기 중 하나에서 3 개의 탭이있는 작은 하위 메뉴를 추가하고 싶습니다. 탭을 클릭하면 다른보기가 표시됩니다. 내가 pushState:false와 함께 그것을하는 방법을 이해했다. 그러나 내가 원하는 것은 깨끗한 URL 다. 지금 당장 내 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>
내보기는
01입니다.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;
}
);
또 다른 사항은 다음과 같습니다. 이벤트를 설정하여보기로 작업을 이동해야합니까? 나는 내가 쓴 내보기에 그 다음, 내 라우터에 secondpage/sub1 thingies를 제거한 다음, 내가 노력 무엇
pushState:true을 설정하는 것입니다 ... 나는 종류의 시도했지만 뷰가 라우터에 정의되어 있기 때문에이 일을 일부러 :
events: {
'click a.sub1': 'sub1',
},
sub1: function(event) {
event.preventDefault();
var sub1Router = new Backbone.Router();
var route = '/secondpage/';
sub1Router.navigate(route, {trigger: true});
},
하지만 나에게 URL을 준 didnt 한 일이,를 찾을 수 없습니다 그래서 ...
어떤 도움을 환영합니다! 미리 감사드립니다 ...
[업데이트] 확인 요청에 의해, 그래서 여기 내 (신규) 라우터 :
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>
희망 t 그의 당신이있어 무엇
흠 어쩌면 내가 충분히 명확 않네 (모델은 뷰가 렌더링 페치된다). 차라리 명확한 백본 방식으로 수행되어야하는 그런 기능을 위해 스크립트를 사용하는 것을 피할 것입니다 ... – SHT