durandal - Durandal : ViewModel が共通ビューで機能しない

Question

シェル ページにナビゲーション/メニュー (垂直) の共通領域を作成しようとしています。このシェルのメニュー領域は、ページ遷移ごとに新しいメニュー セットによって更新されます。ここに私のshell.jsの中にあります

define(function (require) {
var router = require('durandal/plugins/router');
var Menu = function (name, children) {
    this.name = ko.observable(name);
    this.children = ko.observableArray(children);
}

var Menus = ko.observableArray([]);

function GetDSRList() {
    router.navigateTo('#/reports/list2');
}

function activate() {


    router.mapNav('reports/index', 'viewmodels/reports/index', 'Reports');
    router.mapNav('reports/list', 'viewmodels/reports/list', 'List');
    router.mapNav('reports/list2', 'viewmodels/reports/list2', 'List2');
    router.mapNav('home/menu', 'viewmodels/home/menu', 'Main');
    return router.activate('home/menu');
}

function viewAttached() {
    $(document).ready(function () {
        $("#panelbar").kendoPanelBar({
            expandMode: "single"
        }),

        $("#splitter").kendoSplitter({
            panes: [
                    { collapsible: false, resizable: false, size: "20%" },
                    { collapsible: false }
                   ]
        });
    });
}

function token() {
    return $("input[name='__RequestVerificationToken']").val();
}

var shell = {
    router: router,
    activate: activate,
    viewAttached: viewAttached,
    GetDSRList: GetDSRList,
    Menus: Menus,
    token: token,
    Menu: Menu
}

return shell;  

ビュー (shell.html) の場合

<div style="height:100%;">
    <div class="loader" data-bind="css: { active: router.isNavigating }">

    </div>    

    <div id="splitter" style="border:0;height:100%">

            <div class="nav-panel-section">
                <ul id="panelbar">

                   <li data-bind="foreach : Menus">
                        <span class="k-link k-header" data-bind="text: name">
                             <span class="k-icon k-i-arrow-s k-panelbar-expand"></span>
                        </span>
                            <ul data-bind="foreach: children">
                                <li>
                                    <span class="k-link" data-bind="text: $data,click:this.GetDSRList"></span>
                                </li>
                            </ul>
                    </li>


                </ul>
            </div>


            <a href="#/reports/list2">Log off</a>
            <div id ="partialContent">

                    <div class="container-fluid page-host">
                        <!--ko compose: { 
                            model: router.activeItem, //wiring the router
                            afterCompose: router.afterCompose, //wiring the router        
                            cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
                        }--><!--/ko-->

                         <form method="post" action="Account/LogOff" id="logoutForm" >
                            <input type="hidden" name="__RequestVerificationToken" data-bind="value:token"/>
                        </form>
                    </div>

            </div>
    </div>        
</div>

次に、「#/reports/list2」という URL に移動すると、このビューモデル (list2.js) があります。

define(function (require) {

var shell = require('viewmodels/home/shell')


function activate() {
    shell.Menus = [];
    shell.Menus = [
                new shell.Menu("Menu3", ["A", "B", "C"]),
                new shell.Menu("Menu5", ["A", "B", "C"])
            ];
}

var list2 = {
    activate : activate
}

return list2;

});

ただし、ページ全体を更新しない限り、シェルのメニュー UI は変わりません。ここで何か不足していますか？thnx