6

このような状況に人々がどのように対処するのか、私は興味があります。「/categories」のようなルートでカテゴリのリストを表示するアプリケーションがあります。各カテゴリをクリックすると、そのカテゴリの製品のリストが表示され、ルートが「/categories/1/products」のように更新されます。いくつかナビゲートしてから戻るボタンをクリックすると、カテゴリ ビューを再レンダリングせずに、前のカテゴリの製品リスト ビューをレンダリングできるはずです。

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

基本的に、これは、URL に直接アクセスする場合とは異なる方法で、履歴のナビゲーションを前後に移動する場合にルーターが応答する必要があることを意味します。この種の問題に対する一般的な解決策はありますか?

4

1 に答える 1

5

はい、子セクションは、親が作成された後に常に呼び出す必要があります。直接の URL でアクセスしたか、Router ナビゲーションを介してアクセスしたかは関係ありません。

これに対する私の回避策は、常にアプリケーションにメイン ビューを持ち、ルーターは常にこのメイン ビューを呼び出すことです。Router は他のビューにアクセスできません。メイン ビューでは、親ビューが作成されているかどうかを処理できます。

例として、ルーターが MainView のみを呼び出す方法を確認します。必要に応じて親ビューを作成する validateCategories という名前のメソッドがあります。

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

于 2012-07-13T21:00:15.680 に答える