1

Durandal JS をコンセプトとして SPA アプリケーションを構築しようとしています。トップ ナビゲーション パネルと SPA コンテンツがロードされるメイン コンテナがあるレイアウトがあります。アウト ビューの 1 つに、同じビューの右側のパネルのみを変更するナビゲーション付きの左側のパネルがあります。あなたがデュランダル 2.0 内の子敗走であることは知っていますが、私の目標を達成することはできません。トップパネルをクリックすると、メインコンテナが変更されます（上部に2つのタブがあります）が、ロードされたビューの左側に追加のサブナビゲーションがある2番目のタブでは、Durandalで右側のパネルのみを変更する方法がわかりません同じビュー。具体的な実装のためのコードではなく、これを達成するための概念や理論的なガイドラインを求めているわけではありません。

durandal 2.0 内で Areas を使用してみましたが、結果として取得したいものとは異なるようです。

4

1 に答える 1

3

Durandal のサイトに戻ったら、HTML の samples.zipファイルをダウンロードしてください。その悪い子を起動すると、ko サンプルが探していることを正確に行っていることがわかります。

(ko samples フォルダーからの index.js ファイルのコピー)

define(['plugins/router', 'knockout'], function(router, ko) {
    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},
            { route: 'simpleList',      moduleId: 'simpleList/index',       title: 'Simple List',           type: 'intro',      nav: true },
            { route: 'betterList',      moduleId: 'betterList/index',       title: 'Better List',           type: 'intro',      nav: true},
            { route: 'controlTypes',    moduleId: 'controlTypes/index',     title: 'Control Types',         type: 'intro',      nav: true },
            { route: 'collections',     moduleId: 'collections/index',      title: 'Collection',            type: 'intro' ,     nav: true },
            { route: 'pagedGrid',       moduleId: 'pagedGrid/index',        title: 'Paged Grid',            type: 'intro',      nav: true },
            { route: 'animatedTrans',   moduleId: 'animatedTrans/index',    title: 'Animated Transition',   type: 'intro',      nav: true },
            { route: 'contactsEditor',  moduleId: 'contactsEditor/index',   title: 'Contacts Editor',       type: 'detailed',   nav: true },
            { route: 'gridEditor',      moduleId: 'gridEditor/index',       title: 'Grid Editor',           type: 'detailed',   nav: true },
            { route: 'shoppingCart',    moduleId: 'shoppingCart/index',     title: 'Shopping Cart',         type: 'detailed',   nav: true },
            { route: 'twitterClient',   moduleId: 'twitterClient/index',    title: 'Twitter Client',        type: 'detailed',   nav: true}
        ]).buildNavigationModel();

    return {
        router: childRouter,
        introSamples: ko.computed(function() {
            return ko.utils.arrayFilter(childRouter.navigationModel(), function(route) {
                return route.type == 'intro';
            });
        }),
        detailedSamples: ko.computed(function() {
            return ko.utils.arrayFilter(childRouter.navigationModel(), function(route) {
                return route.type == 'detailed';
            });
        })
    };
});
于 2013-09-27T21:08:13.453 に答える