2013-04-16 12 views
5

私のdurandalアプリケーションの「エリア」ごとに異なるナビゲーションが必要です。レイアウトページでNavセクションを定義し、各エリアのナビゲーションを実装するネストされたレイアウトページを持つことによって、エリアを使用するときにASP.NET MVCでこれを実現しました。次のようにデュランダルのビューの構造は次のとおりです。Durandal.js:エリアごとのナビゲーションオプションを変更してください

http://i1346.photobucket.com/albums/p697/user2269352/viewstructure_zps5e21e724.gif

私はASP.NET MVC4デュランダルのテンプレートを使用していると私は私がshell.htmlから次segementを変更する必要があるかもしれないと推測してい

<ul class="nav" data-bind="foreach: router.visibleRoutes"> 
    <li data-bind="css: { active: isActive }"> 
     <a data-bind="attr: { href: hash }, html: name"></a> 
    </li> 
</ul> 

私は理想的には私が閲覧している領域/ページに応じてこのセクションに読み込むことができるHTMLページを別に持っていたいと思います。

答えて

10

これは、経路情報に設定オブジェクトを追加し、そこに領域名を指定することで実現できます。これを使用して、現在のエリアのルートだけを選択するルータのvisibleRoutesコレクションに対して計算された観測値を作成します。

あなたのルート設定は次のようになりますが、設定を追加する例は、このようなものになるだろうかわからない:あなたはナビゲーションのhtmlを制御しているあなたのビューモデルで

var routes = [ 
    { url: 'one/page1', moduleId: 'viewmodels/one/page1', name: 'Page 1', visible: true, settings: {area: 'one'} }, 
    { url: 'two/page1', moduleId: 'viewmodels/two/page1', name: 'Page 1', visible: true, settings: {area: 'two'} } 
]; 
router.map(routes); 

//filter the visible routes for the current area 
viewModel.areaRoutes = ko.computed(function() { 
    var area = this.area; 
    return ko.utils.arrayFilter(router.visibleRoutes(), function (route) { 
     return route.settings.area === area; 
    }); 
}, viewModel); 
+0

非常に賢い、ジョセフ..私はそれを試してみる必要があります。 – mikekidder

+0

私はDurandalの地域についても明白なサポートがあると思いますが、このテクニックについては知っておくと良いです。 –

+0

@JosephGabriel Durandalの地域サポートの情報がどこにあるか知っていますか?私はオンラインを見つけることができないようです。 –

1

Joseph Gabrielベースのソリューションが私のために働いて遊んでいますrouter.activeItem.settings.areSameItemすべてのルートのグループを自分のレイアウトのどこにでも設定できます。

router.activeItem.settings.areSameItem = function (currentItem, newItem, activationData) { 
    return currentItem == newItem; //replace this with your own code 
}; 
関連する問題