Durandal路由器 - 如何将视图定义为模态路径定义

Question

如何声明视图直接点击打开为模态？

我的路线的定义是：

var routes = [ 
    { route: '', moduleId: 'home', title: 'My Apps', nav: true }, 
    { route: 'aboutus', moduleId: 'aboutus', title: 'About Us', nav: true }, 
    { route: 'help', moduleId: 'help', title: 'Help', nav: true }, 
    { route: 'faq', moduleId: 'faq', title: 'FAQ', nav: true }, 
    { route: 'contactus', moduleId: 'contactus', title: 'Contact', nav: true } 
]; 

我想开“联系我们”模块作为当前屏幕上的模态对话框 - 不想导航到另一个视图。

不知道该如何实现。 非常感谢您的建议。

Answer 1

1. 创建自定义模式
2. 使用撰写结合
3. 在外壳视图体改路由器和模型

创建自定义模式

CustomModal.html

<div class="modal-content messageBox"> 
    <div class="modal-header"> 
     Custom modal example 
    </div> 
    <div class="modal-content"> 
     <div data-bind="compose: $root.moduleId"></div> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" data-bind="click: ok">Ok</button> 
    </div> 
</div> 

个

CustomModal.js

define(['plugins/dialog', 'knockout'], function (dialog, ko) { 

    var customModal = function(moduleId) 
    { 
     this.moduleId = moduleId; 
    }; 

    customModal.prototype.ok = function() 
    { 
     dialog.close(this); 
    }; 

    customModal.show = function(moduleId) 
    { 
     return dialog.show(new customModal(moduleId)); 
    }; 

    return customModal; 
}); 

然后，改性shell.js和shell.html

shell.js

define(['plugins/router', '../customModal'], function(router, customModal) 
{ 
    var modified_routes = [ 
    // Normal route configuration 
    { route: '', moduleId: 'home', title: 'My Apps', nav: true }, 
    { route: 'aboutus', moduleId: 'aboutus', title: 'About Us', nav: true }, 

    // Modified route configuration, included add-on property 
    { 
     route: 'contactus', 
     moduleId: 'contactus', 
     title: 'Contact', 
     nav: true, 
     showOnModal: true // add-on property 
    } 
    ]; 

    return { 
     showModal: function(data) 
     { 
     customModal.show(data.moduleId); 
     }, 
     activate: function() 
     { 
     router.map(modified_routes).buildNavigationModel().activate(); 
     } 
    } 
}); 

shell.html

<ul class="nav navbar-nav" data-bind="foreach: router.navigationModel"> 
    <li> 
     <!-- ko if: ! showOnModal --> 
     <a data-bind="attr: { href: hash }"><span data-bind="text: title"></span></a> 
     <!-- /ko --> 

     <!-- ko if: showOnModal --> 
     <a data-bind="click: $root.showModal"><span data-bind="text: title"></span></a> 
     <!-- /ko --> 
    </li> 
</ul>