Question

我正在尝试使用Durandal 2导航创建一个简单的多级导航菜单，与.sessions函数在Durandal 1中的工作方式相同。

这是一个主要的顶部下拉菜单：

首页详情员工

     --> HR   --> Search
     --> IT   --> New Employee

我熟悉Durandal Knockout示例中的页面子导航示例，但它并没有完全展示如何连接导航下拉菜单。

我相信我在下面的代码中有点接近，显示第二级菜单，但菜单下拉列表中没有文本或链接处于活动状态。获得以下例外：

Unable to parse bindings.
Bindings value: css: { active: isActive }, attr: { href: hash }, text: title
Message: isActive is not defined;
View: views/nav;
ModuleId: viewmodels/shell

代码建立在Hot Towel模板之上。

---------查看代码----------- nav.html

<div class="btn-group" data-bind="foreach: router.navigationModel">
<!-- ko if: $data.childRoutes === undefined && $data.parent === undefined -->
    <a data-bind="css: { active: isActive }, attr: { href: hash }, text: title" class="btn btn-info" href="#"/>
<!-- /ko -->
<!-- ko if: $data.childRoutes !== undefined -->
<div class="btn-group btn-info">
    <a data-bind="css: { active: isActive }, attr: { href: hash }, text: title" class="btn btn-info" href="#"/>
    <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
        <span class="caret"/>
    </button>
    <ul class="dropdown-menu" data-bind="foreach: childRoutes">
        <a data-bind="css: { active: isActive }, attr: { href: hash }, text: title" class="btn btn-info" href="#"/>
    </ul>
</div>
<!-- /ko -->

-----查看模型-------- shell.js

function boot（）{ log（'Hot Towel SPA Loaded！'，null，true）;

    router.on('router:route:not-found', function (fragment) {
        logError('No Route Found', fragment, true);
    });

    var routes = [
        { route: '', moduleId: 'home', title: 'Home', nav: 1 },
        {
            route: 'details', moduleId: 'details', title: 'Details', nav: 2
            ,
            childRoutes: [{ route: 'helloWorld', moduleId: 'helloWorld/index', title: 'Hello World', nav: true }]

        }];

    var childRouter = router
        .makeRelative({ moduleId: 'viewmodels' }) // router will look here for viewmodels by convention
        .map(routes)            // Map the routes

        .buildNavigationModel() // Finds all nav routes and readies them
        .activate();            // Activate the router

    return childRouter;

}

有人可以提供任何帮助或示例吗？

不重复。

更新为以下代码，并在详细信息工作下有1个下拉菜单，但第二个按钮不起作用。

var routes = [
            { route: '', moduleId: 'home', title: 'Home', nav: 1 },
            {
                route: 'details', moduleId: 'details', title: 'Details', nav: 2
                ,
                childRoutes: [{ route: '', moduleId: 'home', title: 'Hello World', nav: true, isActive: koComputed(), hash: '#' }
                               ,
                               { route: 'details', moduleId: 'details', title: '2nd Menu', nav: true, isActive: koComputed(), hash: '#' }
                             ]
   ];

function koComputed() {

        var koCompute = ko.computed(function () {

            return router.routes;
        });

     }

以下工作......

var routes = [
            { route: '', moduleId: 'home', title: 'Home', nav: 1 },
            {
                route: 'details', moduleId: 'details', title: 'Details', nav: 2
                ,
                childRoutes: [{ route: '', moduleId: 'home', title: 'Hello World', nav: true, isActive: koComputed(), hash: '#' }
                               ,
                               { route: '', moduleId: 'details2', title: '2nd Menu', nav: true, isActive: true, hash: '#details' }
                             ]

Durandal 2多级菜单导航

0 个答案: