backbone.js 라우터로보기를 전환하는 방법은 무엇입니까?

Question

이것은 백본 라우터를 사용하고 백본에서 뷰를 렌더링하는 것과 관련하여 더 많은 개념적 질문입니다.

예를 들어 (나는 이것을 배우기 위해 무엇을 만들고 있는지) 연락처 작성을위한 기본 CRUD 응용 프로그램, 양식 작성, 모든 연락처 목록, 연락처 단일보기 및 편집 양식이 있습니다. .

단순함을 위해 나는 한 번에 이러한 것들 중 하나만보고 싶다고 말할 것입니다. 분명히 jQuery로 보여 주거나 숨기는 일은 쉽지 않을 것이다.

나는이 개 아이디어, 모든보기를 제거하고 모든 뷰에 대한들을 수있는 이벤트 (가까운 방법을 트리거)와 메인 앱보기 그 다음 인스턴스화를 전송 내 라우터에서

1) 트리거 사용자 정의 이벤트를 특정보기 - 예 :

App.Router = Backbone.Router.extend({ 
    routes: { 
     '' : 'index', 
     'addnew' : 'addNew', 
     'contacts/:id' : 'singleContact', 
     'contacts/:id/edit' : 'editContact' 
    }, 

    index: function(){ 

     vent.trigger('contactR:closeAll'); 
     vent.trigger('contactR:index'); 
    }, 

    addNew: function() { 

     vent.trigger('contactR:closeAll'); 
     vent.trigger('contactR:addNew'); 
    }, 

    singleContact: function(id) { 

     vent.trigger('contactR:closeAll'); 
     vent.trigger('contactR:singleContact', id); 
    }, 

    editContact: function(id) { 

     vent.trigger('contactR:closeAll'); 
     vent.trigger('contactR:editContact', id); 
    }, 

}); 

(NB : 환기가 백본 이벤트를 확장하고 내가 술집/하위 수 OBJ)

2) 또는// 내가 보내야 수있는 것입니다 가까운 모든 이벤트 및 생성 라우터보기의 인스턴스?

주 나는 꼭두각시 등과 같은 추가 라이브러리 또는 프레임 워크로 탐구없이이를 달성하기 위해 찾고 있어요

당신은이 같은 유틸리티 오브젝트 사용할 수 있습니다

Answer 1

:

var ViewManager = { 
    currentView : null, 
    showView : function(view) { 
     if (this.currentView !== null && this.currentView.cid != view.cid) { 
      this.currentView.remove(); 
     } 
     this.currentView = view; 
     return view.render(); 
    } 
} 

을 당신은을 표시 할 때마다 뷰 사용 ViewManager.showView(yourView)

App.Router = Backbone.Router.extend({ 
    routes: { 
     '' : 'index', 
     'addnew' : 'addNew', 
     'contacts/:id' : 'singleContact', 
     'contacts/:id/edit' : 'editContact' 
    }, 

    index: function(){ 
     var indexView ... 
     ViewManager.showView(indexView); 
    }, 

    addNew: function() { 
     var addNewView ... 
     ViewManager.showView(addNewView); 
    }, 

    singleContact: function(id) { 
     var singleContactView ... 
     ViewManager.showView(singleContactView); 
    }, 

    editContact: function(id) { 
     var editContactView ... 
     ViewManager.showView(editContactView); 
    }, 

}); 

그래서 그것은 당신의 뷰를 렌더링의 책임 년대 ViewManager있어