2012-07-13 6 views
6

私はこのような状況を人々がどのように処理するのか不思議です。私は "/ categories"のようなルートでカテゴリのリストを表示するアプリケーションを持っています。各カテゴリをクリックすると、そのカテゴリの製品のリストが表示され、ルートは「/ categories/1/products」のように更新されます。一部をナビゲートしてから戻るボタンをクリックすると、カテゴリビューを再描画せずに、直前のカテゴリの製品リストビューをレンダリングするだけで済みます。サブビュー付きのバックボーンルーティング

ただし、「/ categories/2/products」に直接移動すると、カテゴリリストと商品リストがレンダリングされるようにする必要があります。

基本的には、ルータはURLに直接アクセスするよりも、バック/フォワード履歴のナビゲーションに異なる応答をする必要があることを意味します。このタイプの問題に共通の解決策がありますか?

答えて

5

はい、子セクションは、親が作成された後は常に呼び出されなければなりません。直接URLまたはルーターナビゲーションからアクセスされた場合は問題ありません。

私の回避策は、常に自分のアプリケーションにメインビューを持ち、ルータは常にこのメインビューを呼び出します。ルーターは他のビューにアクセスできません。私のメインビューでは、親ビューを作成するかどうかを扱うことができました。

例、ルータは、私だけが必要な場合は、親ビューを作成する方法という名前のvalidateCategories持ってそこMAINVIEWを呼び出して、どのように確認してください:あなたがゼロから新しいプロジェクトを開始しようとしている場合も

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'); 
    } 
}); 

をしていませんBackbone.jsプロジェクトを整理するのに役立つこの拡張モジュールを見てください。 https://github.com/derickbailey/backbone.marionette

関連する問題