Durandal 路由器 - 如何在路由定义中将视图定义为模式答案

【问题标题】：Durandal router - how to define view as modal in routes definitionDurandal 路由器 - 如何在路由定义中将视图定义为模式
【发布时间】：2014-05-23 01:50:10
【问题描述】：

如何声明视图在点击时直接以模态方式打开？

我的路线定义是：

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”模块作为模式对话框打开 - 不想导航到另一个视图。

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

【问题讨论】：

您不能通过路由器执行此操作。在您的外壳视图模型中，您可以显示在应用程序周围共享的模式。按照这些说明 - durandaljs.com/documentation/…

标签： durandal single-page-application durandal-2.0 durandal-navigation

【解决方案1】：

创建自定义模式
使用 Compose 绑定
修改了外壳视图和模型上的路由器

创建自定义模式

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>

【讨论】：

嗨，我试过这个解决方案，但收到异常：无法处理绑定“foreach：函数（）{return shell.router.navigationModel}”消息：无法处理绑定“如果：函数（）{ return !showOnModal }" 消息：showOnModal 未定义；
我将 showOnModal: false 添加到其他路线 - 现在它正在工作！谢谢！
嗨@ej_ja，也许你应该试试所以你不需要在其他路线上添加 showOnModal 属性. *我不确定这是否可行
@ej_ja 如果您只是检查showOnModal 作为$data 的属性，您将不会收到该错误（并且不需要将showOnModal: false 放在任何地方）：。