8

私はアプリを構築しており、2 層のメニューを表示したいと考えています。両方の層が常に利用可能です。Durandal 2.0は、より簡単なディープリンクを可能にする「子ルーター」をサポートする新しいルーターを導入しました。

私の質問- 「子」ナビゲーション ルートを永続的にロードすることはできますか (親がアクティブでないときにサブメニューをレンダリングします)、または「子ルーター」の設計は、ディープリンクが有効になったときにそれらを評価するために遅延ロードすることを意図していますか?評価される？

Durandal の例では、メイン ナビゲーションがスプラット ルートを登録し、そのビュー モデルがロード/アクティブ化されると、子ルーターが登録されます。

例：Durandal 2.0 で提供されている例では、mian nev は次の場所に登録されています。shell.js

router.map([
                { route: ['', 'home'], moduleId: 'hello/index', title: 'Validation test', nav: true },
                { route: 'knockout-samples*details',    moduleId: 'ko/index',               title: 'Knockout Samples',  nav: true, hash: '#knockout-samples' }
            ]).buildNavigationModel()
              .activate();

そして、ko/index.jsビューモデルは子を登録します（ on activate()）

var childRouter = router.createChildRouter()
        .makeRelative({
            moduleId:'ko',
            fromParent:true
        }).map([
            { route: '',                moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro' },
            { route: 'helloWorld',      moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro',      nav: true},
            { route: 'clickCounter',    moduleId: 'clickCounter/index',     title: 'Click Counter',         type: 'intro',      nav: true}
        ]).buildNavigationModel();

一方、ルートを 1 か所で定義しようとしています。たとえば、次のようになります。

 var routes = [
   { route: ['', 'home'], 
        moduleId: 'hello/index', 
        title: 'Validation test', 
        nav: true },
   { route: 'knockout-samples*details',    
        moduleId: 'ko/index',
        moduleRootId: 'ko', // Custom property to make child routes easier              
        title: 'Knockout Samples',  
        nav: true, 
        hash: '#knockout-samples',
        childRoutes: [
            { route: '',                moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro' },
            { route: 'helloWorld',      moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro',      nav: true},
            { route: 'clickCounter',    moduleId: 'clickCounter/index',     title: 'Click Counter',         type: 'intro',      nav: true}
        ]}
   ])

そして、私が苦労している部分は、子ルートを登録することであり、それらに移動するときにそれらを正しく評価します。(メニューのレンダリングは後で来る...)

// Load routes              router.map(routes.navRoutes).buildNavigationModel().mapUnknownRoutes(function(instruction)
{
    logger.logError('No Route Found', instruction.fragment, 'main', true);
});

// Try load child routes...
$.each(routes.navRoutes, function(index, parentRoute) {
     if (!parentRoute.childRoutes) {
                return;
            }

            var childRouter = router.createChildRouter()
                .makeRelative({
                    moduleId: parentRoute.moduleRootId,
                    fromParent: true // also tried false + non-splat routes...
                }).map(parentRoute.childRoutes).buildNavigationModel();
        });

このナビゲーションをレンダリングする際にさまざまなエラーが発生しました。(アクティブ化されていない親または子のいずれかから) ハッシュを計算しようとすると、ほとんどが内部の router.js エラーです。そのため、すべてのハッシュが定義されています。

ナビゲーションをマップするために取得すると、子ルートにアクセスできないようです.メインのsplatページをエラーなしでロードするだけです.

それで、私はこれについて正しい方法で行っているのだろうかと思っていますか？(すべての子ルートを前もって登録し、2 層メニューをレンダリングしようとしています)。

フォールバックは、サブルーティングに関するデュランダル 1.2の回答のようなものを使用しており、フラット ルーティング登録、カスタム 'isSameItem' 関数、および計算されたオブザーバブルを組み合わせて 2 層ナビゲーションをレンダリングしていると考えています。

4

1 に答える 1