我们正在尝试使用Durandal JS作为概念来构建SPA应用程序,我们的布局是在顶部导航面板和主容器中加载SPA内容。在其中一个视图中,左侧面板带有导航功能,仅应更改同一视图的右侧面板。我知道您是Durandal 2.0中的儿童狂,但我无法实现我的目标。单击顶部面板应该更改主容器(顶部有两个拖曳选项卡),但是在第二个选项卡上,加载视图的左侧还有额外的子导航,我不知道如何使Durandal只更改右侧的面板相同的看法。我并不是在要求代码不是为了具体的实现,而是关于如何实现这一目标的概念或理论指导。
我什至尝试在durandal 2.0内使用Areas,但这似乎与我想要获得的结果不同。
最佳答案
如果您回到Durandal网站,请下载HTML samples.zip文件。解雇那个坏男孩,您会发现ko样本确实在执行您想要的操作。
(从ko samples文件夹复制index.js文件)
define(['plugins/router', 'knockout'], function(router, ko) {
var childRouter = router.createChildRouter()
.makeRelative({
moduleId:'ko',
fromParent:true
}).map([
{ route: '', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro' },
{ route: 'helloWorld', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro', nav: true},
{ route: 'clickCounter', moduleId: 'clickCounter/index', title: 'Click Counter', type: 'intro', nav: true},
{ route: 'simpleList', moduleId: 'simpleList/index', title: 'Simple List', type: 'intro', nav: true },
{ route: 'betterList', moduleId: 'betterList/index', title: 'Better List', type: 'intro', nav: true},
{ route: 'controlTypes', moduleId: 'controlTypes/index', title: 'Control Types', type: 'intro', nav: true },
{ route: 'collections', moduleId: 'collections/index', title: 'Collection', type: 'intro' , nav: true },
{ route: 'pagedGrid', moduleId: 'pagedGrid/index', title: 'Paged Grid', type: 'intro', nav: true },
{ route: 'animatedTrans', moduleId: 'animatedTrans/index', title: 'Animated Transition', type: 'intro', nav: true },
{ route: 'contactsEditor', moduleId: 'contactsEditor/index', title: 'Contacts Editor', type: 'detailed', nav: true },
{ route: 'gridEditor', moduleId: 'gridEditor/index', title: 'Grid Editor', type: 'detailed', nav: true },
{ route: 'shoppingCart', moduleId: 'shoppingCart/index', title: 'Shopping Cart', type: 'detailed', nav: true },
{ route: 'twitterClient', moduleId: 'twitterClient/index', title: 'Twitter Client', type: 'detailed', nav: true}
]).buildNavigationModel();
return {
router: childRouter,
introSamples: ko.computed(function() {
return ko.utils.arrayFilter(childRouter.navigationModel(), function(route) {
return route.type == 'intro';
});
}),
detailedSamples: ko.computed(function() {
return ko.utils.arrayFilter(childRouter.navigationModel(), function(route) {
return route.type == 'detailed';
});
})
};
});
关于javascript - 杜兰达尔嵌套 View 组成,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19049255/