我试图在我的数据库入门套件中在durandal 2中创建子路由但没有成功。
虽然我成功地用静态内容呈现它,如下所示:
define(['plugins/router', 'knockout'], function (router, ko) {
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: 'sectionGroups',
fromParent: true
}).map([
{ route: ['', 'child1'], moduleId: 'pages/child1', title: 'child1', nav: true },
{ route: 'child2: moduleId: 'pages/child2', title: 'child2', nav: true },
{ route: 'child3', moduleId: 'pages/child3', title: 'child3', nav: true }
]).buildNavigationModel();
return {
router: childRouter
};
});
但是我无法从数据库中动态输出菜单。我做错了吗?请参阅下面的代码
define(['plugins/router', 'knockout','services/oasisManager', 'services/logger'], function (router, ko, om, logger) {
var pageRoutes = getPageRoutes();
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: 'sectionGroups',
fromParent: true
})
.map(pageRoutes)
.buildNavigationModel();
function getPageRoutes() {
var pageRoutes = [];
om.getOasis(134).done(function() {
ko.utils.arrayForEach(om.activeOasis.PageRoutes, function(item) {
var nav = true;
if (item.Route == '') {
nav = false;
}
pageRoutes.push({
route: item.Route,
moduleId: item.ModuleId,
title: item.Title,
nav: nav
});
});
});
return pageRoutes;
}
return {
router: childRouter
};
});
Html看起来几乎一样。请帮忙
<div class="container-fluid knockout-samples">
<div class="row-fluid">
<div class="span2 well">
<ul class="nav nav-list">
<li class="nav-header">Basic Examples</li>
<!--ko foreach: router.navigationModel-->
<li data-bind="css: { active: isActive }">
<a data-bind="attr: { href: hash }, text: title"></a>
</li>
<!--/ko-->
</ul>
</div>
<div class="span10">
<!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
</div>
</div>
答案 0 :(得分:0)
我认为代码中发生的事情是getPageRoutes
返回一个空白数组。它应该返回一个路由列表的承诺。你可能需要这样的东西。
function getPageRoutes() {
return om.getOasis(134).done(function(routes) {
var pageRoutes = [];
ko.utils.arrayForEach(routes, function(item) {
var nav = true;
if (item.Route == '') {
nav = false;
}
pageRoutes.push({
route: item.Route,
moduleId: item.ModuleId,
title: item.Title,
nav: nav
});
});
return pageRoutes;
});
}
我认为om.getOasis(134)
将返回路线列表的承诺。
不确定这是否会有所帮助,但这就是我在我的durandal应用程序中所做的与你想要实现的类似的东西。我使用Q promises library来处理对webapi的异步调用。
define(['plugins/http', 'services/logger'], function (http, logger) {
"use strict";
var getRoutes = function () {
return http.get("routes/availableRoutes").then(function (data) {
logger.log("Routes Loaded", data, 'services/routes', false);
return data;
});
};
var routes = {
getRoutes: getRoutes
};
return routes;
});
然后,调用代码变为如下所示。
return routes().then(function (availableRoutes) {
return router.makeRelative({
moduleId: 'sectionGroups',
fromParent: true
})
.map(availableRoutes)
.buildNavigationModel()
.activate();
});