杜兰达尔嵌套视图组合
Durandal nested view composition
我们正在尝试使用 Durandal JS 作为概念构建 SPA 应用程序,我们有布局,其中有顶部导航面板和加载 SPA 内容的主容器。 在其中一个 out 视图中,我们有带有导航的左侧面板,它应该只更改同一视图的右侧面板。我知道你在杜兰达尔2.0中是儿童溃败,但我无法实现我的目标。单击顶部面板应该更改主容器(顶部有拖曳选项卡),但在第二个选项卡上,加载视图左侧有额外的子导航,我不知道如何使 Durandal 只更改同一视图的右侧面板。我要求的代码不是为了具体的实现,而是关于如何实现这一目标的概念或理论指南。
我什至尝试在 durandal 2.0 中使用区域,但这似乎与我想要获得的结果不同。
如果您返回 Durandal 网站,请下载 HTML 示例.zip文件。解雇那个坏男孩,你会看到ko样本正在做你正在寻找的。
(索引的副本.js 来自 ko 样本文件夹的文件)
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从主svg对象动态创建svg视图框
- 正在使用$location.path(.)路由ng视图
- angular.js没有'无法在PhoneGap中处理视图标记
- 如何包含特定于每个视图angularjs的javascript文件
- 在ASP.NET MVC3中将多个视图组合在一起
- 在组合框筛选后执行回调网格视图
- 框架7:拆分视图降级到标签栏?(组合示例)
- Backbone.js在哪些方面不支持组合视图
- 杜兰达尔嵌套视图组合
- 获取从视图到控制器的值组合框 extJ
- DurandalJs:一种通用解决方案,用于将焦点放在组合视图上的第一个输入元素上
- 在视图中使用compile in指令和ng repeat的组合会阻止正确更新范围元素列表
- 在剑道界面中,无法根据组合框选择正确地填充剑道树视图
- 组合优于继承,这是向视图添加额外功能而不诉诸继承的更好方式
- Aurelia组合元素视图模型,未调用configureRouter
- 为单个状态组合嵌套视图和多个视图
- 如何在视图中设置组合框的选定字段
- Backbone.js:组合多个模型的复杂视图
- 只有在DurandalJS中激活了所有组合模块后,才能附加视图
- 如何组合我的“桌面视图”?带有我的移动视图的HTML文件jQuery移动文件