杜兰达2.0“路线”

时间:2013-10-16 15:57:37

标签: javascript durandal hottowel durandal-navigation durandal-2.0

我是初学者,正在尝试学习SPA / Durandal,Knockout等......

我的路线需要一些管理下拉按钮的帮助。

到目前为止,以下是我在 shell.js 中的路线:

var routes = [
            { route: '', moduleId: 'home', title: 'Home', nav: 1 },
            { route: 'downtime', moduleId: 'downtime', title: 'Downtime', nav: 2 },
            { route: 'downtimeadd', moduleId: 'downtimeadd', title: 'Add A New Downtime', nav: false, settings: { admin: true } },
            { route: 'production', moduleId: 'production', title: 'Production', nav: 4 }];

我还在 shell.js 中创建了 adminRoutes ,以便使用KO绑定到该视图:

var adminRoutes = ko.computed(function () {
        return router.routes.filter(function (r) {
            return r.settings.admin;
        });
    });

根据研究,他们说 router.routes 是一个数组,但当我将其绑定到我的视图时,该按钮会显示下拉菜单的0项。

当我(下面)我可以获得所有路线,但我只需要管理路线......

var adminRoutes = ko.computed(function () {
        return router.routes;
    });

我该怎么办?似乎 router.routes 实际上不是一个数组? 如果我尝试将其打印到控制台:

console.log(router.routes[0]); //Chrome says its undefined...
console.log(router.routes); //Shows array of size 4...

Yup毫无头绪......帮助将不胜感激!

更新 -------------------------------------- -----------------------------

即使在RainerAtSpirit的建议之后,当我在代码中过滤时,我仍然得到一个空数组。

var router = require('plugins/router');
//Array size 4
console.log(router.routes); 

//Array size 0
console.log(router.routes.filter(function (r) { return r; })); 

但是当我在“ chrome console ”中运行时:

var router = require('plugins/router')
router.routes.filter(function (r) { return r; })

我确实得到了数组,所以我不知道为什么在代码中它不起作用。

2 个答案:

答案 0 :(得分:0)

在敲门时,当你使一个属性可观察时,它会转入函数包装,所以当你需要获得实际值时,你需要将它作为一个函数来访问它。这意味着

router.routes[0]将是未定义的,但router.routes()[0]将正常工作!

你可以尝试

var adminRoutes = ko.computed(function () {
        return router.routes().filter(function (r) {
            return r.settings.admin;
        });
    });

答案 1 :(得分:0)

我让这个工作,虽然可能没有我想要的那么完美。

我注意到的第一个问题是其他人没有看到的问题。在我的例子中(使用来自HotTowel模板1.1版for VS 2013的druandal 2.0),我注意到在激活方法之前调用了添加adminRoutes的代码。因此,我的route.routes是一个空数组。为了解决这个问题,我转而使用路由从config.js映射的路由数组(注意:config.routes而不是route.routes):

var adminRoutes = ko.computed(function () {
    return config.routes.filter(function(r) {
        return r.admin;
    });
});

最后,我将返回“r.admin”。这是希望使工作更好的部分,因为我在没有“设置”组的管理路线中添加了管理属性,请参阅“ admin:true ”:

var routes = [
    { route: '', moduleId: 'equipment', title: 'Equipment', nav: 1 },
    { route: 'testresults', moduleId: 'testresults', title: 'Test Results', nav: 2 },
    { route: 'testresultdetail/:id', moduleId: 'testresultdetail', title: 'View a test result', nav: false },
    { route: 'testresultadd', moduleId: 'testresultadd', title: 'Add a Test Result', nav: false, caption: '<i class="fa fa-plus"></i> Add Test Result', admin: true }
];

通过这两项更改,菜单项出现了。