2012-07-13 4 views
6

저는 사람들이 어떻게 이런 상황을 어떻게 처리하는지 궁금합니다. "/ categories"와 같은 경로에 범주 목록을 표시하는 응용 프로그램이 있습니다. 각 카테고리를 클릭하면 해당 카테고리의 제품 목록이 나타나고 경로는 "/ categories/1/products"와 같이 업데이트됩니다. 일부를 탐색 한 다음 뒤로 버튼을 클릭하면 카테고리보기를 다시 렌더링하지 않고 이전 카테고리의 제품 목록보기 만 렌더링 할 수 있습니다.서브 뷰가있는 백본 라우팅

그러나 "/ categories/2/products"로 직접 이동할 때 제품 목록뿐만 아니라 범주 목록도 렌더링되도록해야합니다.

기본적으로 라우터는 URL에 직접 액세스하는 것보다 뒤로/앞으로 검색 내역을 다르게 응답해야한다는 것을 의미합니다. 이런 유형의 문제에 대한 일반적인 해결책이 있습니까?

답변

5

예, 부모 섹션을 만든 후에 항상 하위 섹션을 호출해야하며 직접 URL 또는 라우터 탐색을 통해 액세스 한 경우에는 문제가되지 않습니다.

내 해결 방법은 항상 내 응용 프로그램에 기본보기가 있으며 라우터는 항상이 기본보기를 호출합니다. 라우터는 다른보기에 액세스 할 수 없습니다. 내 메인보기에서는 부모보기가 만들어지는 경우를 처리 할 수 ​​있습니다. 또한 처음부터 새 프로젝트를하지 시작하려는 경우

var MainView = Backbone.View.extend({ 
    id : 'mainView', 
    categories : null, 

    events : { 
    }, 

    initialize : function(){ 
     _.bindAll(this); 
    }, 

    openSection : function(section){ 
     switch(section){ 
      case 'categories': 
       this.validateCategories(); 
       break; 
      case 'products': 
       this.validateCategories(); 
       this.categories.open(new ProductsView()); 
       break; 
     } 
    }, 
    validateCategories : function(){ 
     if(!this.categories){ 
      //we create the parent view only if not yet created 
      this.categories = new CategoriesView(); 
     } 
    } 
}); 
var mainView = new MainView(); 
var RouterClass = Backbone.Router.extend({ 

    routes : { 
    "categories" : "viewCategories", 
    "categories/:id/:section" : "viewProducts" 
    }, 

    viewCategories : function(path) { 
    mainView.openSection('categories'); 
    }, 

    viewProducts : function(id, section){ 
    mainView.model.set({ 
     productId : id, 
     section : section, 
    }); 
    mainView.openSection('products'); 
    } 
}); 

:

예, 라우터는 MAINVIEW를 호출하고 거기에 내가 필요한 경우 부모 뷰를 생성하는 방법이라는 validateCategories을 얼마나 확인 이 확장 프로그램에서 Backbone.js 프로젝트를 구성하는 데 도움이되는 것을 잊지 마십시오. https://github.com/derickbailey/backbone.marionette

관련 문제