2

Backbone Marionette を使用して作成したいアプリケーションがあります。基本的に、UI 構造は非常にシンプルです。がある：

  • 2 つの最上位リージョン。1 つはメニュー用、もう 1 つはコンテンツ用
  • メニュー領域にはメニュー ビューが表示されます
  • コンテンツ領域には、2 つのビューが隣り合って表示されます
    • 左はサブナビ用
    • 正しいものは実際のコンテンツ用です

例として、メニューは「メール」、「カレンダー」、「連絡先」など、アプリケーションの 2 つの部分を切り替える場合があります。これらの各パーツには、サブナビゲーション ビューに表示される独自のサブナビゲーションがあり、各パーツにはデフォルト ビューがあります。たとえば、「メール」部分では「受信トレイ」ビュー、「カレンダー」部分では「月」ビューなどです。

したがって、通常、ネストされたナビゲーションがあります。

ルーターを使用してこれを実装するにはどうすればよいですか?

私の考えは、#mailやなどの部分にルートを提供するだけのアプリケーションレベルのルーターを持つことです#calendar。

サブナビゲーション ビューには、独自のルーターが必要です。したがって、たとえば、メールのサブナビゲーション ビューはinboxおよびのルーターを持つことができますsent。

最終的には のようなルートが必要です#mail/inboxが、最初の部分はトップレベル ルーターで処理し、2 番目の部分はサブレベル ルーターで処理する必要があります。

私の質問は、サブレベルのルーターが「メール」などの URL プレフィックスを知る必要がなく、カスケード ルーティングが発生するような方法でルーターをネストできるかどうかです。これは可能ですか？

それとも、このアプローチは完全に間違っていますか?

4

1 に答える 1

2

Marionette にこれに対する解決策があるかどうかはわかりませんが、探している機能を提供するBackbone.subrouteというプラグインがあります。

このようにサブルートを分離することは正当なパターンであり、私は以前にそれを使用しました。しかし、メイン アプリケーション ルーターに各セクションの「メイン」ルートを配置することは適切ではないという結論に達しました。代わりに、「ルート」URL を提供するルーターの共通基本クラスの実装を開始しました。

var BaseRouter = Backbone.Router.extend({

    //Root path for all routes defined by this router. Override this in a deriving
    //class for keeping route table DRY.
    urlRoot: undefined,

    //override the route method to prefix the route URL
    route: function(route, name, callback) {
      if(this.urlRoot) {
        route = (route === '' ? this.urlRoot : this.urlRoot + "/" + route);
      }

      //define route
      Backbone.Router.prototype.route.call(this, route, name, callback);

      //also support URLs with trailing slashes
      Backbone.Router.prototype.route.call(this, route + "/", name, callback);
    }
});

使用法：

var CalendarRouter = BaseRouter.extend({
    //all routes will be relative to "calendar"
    urlRoot:"calendar",
    routes: {
        //...
    }
}):

確かに、私の場合、基本クラスで他の一般的なルーター タスクを定義しているため、これは理にかなっています。各ルート URL に追加の「カレンダー」プレフィックスを入力しないようにするだけでは、実際には保証されません。

編集:明確にするために、Backbone.SubRoute プラグインは、メイン ルーターでルート ルートを定義することを強制しません。提案した基本クラスと同じ方法で使用できます。しかし、ルート プレフィックスだけが必要な場合は、基本クラスの方が軽量でシンプルなソリューションです。

于 2013-01-28T14:09:01.410 に答える