20

目的: 子ルーターを利用してアプリの重要な機能領域ごとにルートを整理することの分離とカプセル化の利点が必要です。ただし、これらのルートを親ルーターのビューポート バインディングで処理および構成したいと考えています。すなわち

<div id="parentRouterViewport" data-bind="router: { cacheViews: true }"><div>

これまでのところ、（実験として）ルートを委任するために親ルーターにコールバックすることを含め、私が試みたすべてが失敗しました。これが可能かどうか疑問に思います。

簡潔にするために、ルーティングのミッション クリティカルなコード セクションを含めています。

shell.js

return {
        router: router,
        activate: function() {
            return router.map([
                    { route: 'App*splat', moduleId: 'app/home/viewmodels/index', title: 'Home', nav: true }
                ]).buildNavigationModel()
                .mapUnknownRoutes('app/home/viewmodels/error')
                .activate();
        }
    };

shell.html

<div id="content" data-bind="router: { cacheViews: true }"></div>

index.js (子ルーティング モジュール)

var childRouter = router.createChildRouter()
        .makeRelative({
            moduleId: 'app/home/viewmodels',
            fromParent: true
        }).map([
            { route: 'EligibiltySearch',    moduleId: 'eligibilitySearch',  title: 'Eligibility Search',    nav: true }
        ]).buildNavigationModel();

    return {
        router: childRouter
    };
});

これが機能する唯一の方法は、対応するindex.htmlビューにルーター ビューポート バインディングを配置することです。ただし、これは、私が設計しようとしている CSS レイアウトとページのルック アンド フィールに基づいて求めているものではありません。すべてをパネルとして表現し、ルートにヒットするたびに別のパネルに交換する必要があります。現在、このアプローチでは常に 2 つのパネルが開いています。私が言いたいことのより良い文脈については、下の写真を見てください。

上記の CSS レイアウトの問題の写真

4

1 に答える 1

3

私たちのチームでは、Knockout 変数を使用して独自の「子ルーター」を作成し、タブ ボタンのクリックに基づいてサブビューを表示/非表示にしました。これに関する 1 つの注意点は、subView を機能させるために、メイン/親ビューから activate、deactivate、compositionComplete などを呼び出す必要があることです。他にもいくつかの落とし穴がありますが、これをオプションとして提供するか、後でこの質問を見る他の人に提供すると思いました。

于 2015-09-21T19:13:21.820 に答える