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 }
];

我想打开＆＃39; contactus＆＃39;模块作为当前屏幕上的模态对话框 - 不想导航到另一个视图。

不知道如何完成。非常感谢您的建议。

Answer 1

创建自定义模式
使用撰写绑定
在shell视图和模型上修改路由器

创建自定义模式

<强> 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>

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

1 个答案: