특정보기에 대한 백본 서브 루터

Question

특정보기에 서브 루터를 추가 할 수 있습니까? 내가 여러 차용 Backbone 앱을 가지고 있다고 가정 해 보겠습니다. 지금 라우터는 다음과 같을 것입니다.

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 개 탭 (갤러리, 사양, 정보) 것/페이지를 다시 렌더링하지 않고 특정 자동차의 컬렉션?

도움/의견을 보내 주시면 감사하겠습니다.

Answer 1

이벤트, 백본 트리거 및 사용자 지정 EventHandler 개체를 사용하여이 작업을 수행 할 수 있습니다.

이벤트는 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); 

는 또한 탭의 새로 고침을 처리 할 수있는 라우터 방법을 추가 할 수 있습니다.