1

如何在单击时直接将视图声明为模态？

我的路线定义是：

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

我想在当前屏幕上打开“contactus”模块作为模式对话框 - 不想导航到另一个视图。

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

4

1 回答 1

4
  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

外壳.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();
      }
   }  
});

外壳.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>
于 2014-05-20T05:52:46.983 回答