0

我正在尝试在我的 shell 页面中为我的导航/菜单（垂直）创建一个公共区域。然后，这个 shell 的菜单区域将在每次页面转换时由一组新的菜单更新。在我的 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>

然后转到 url '#/reports/list2' 我有这个视图模型（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;

});

但是，除非您刷新整个页面，否则 shell 的菜单 UI 不会改变。我在这里错过了什么吗？谢谢

4

1 回答 1

0

您的问题是您创建了一个 observableArray，然后在新的视图模型加载时将其清除。您需要为 observableArray 使用 setter 函数来保持它与 DOM 的连接（请不要更正我的语法，试图亲吻！！）

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

只需添加参数即可解决您的问题。清除时使用参数，设置时使用参数。

于 2013-08-13T15:52:34.303 回答