Durandal router - how to define view as modal in routes definition

Question

How can I declare view to be opened as modal directly on click?

My route's definition is:

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

I want to open 'contactus' module as modal dialog on a current screen - don't want to navigate to another view.

Have no idea how to acomplish that. Many thanks for suggestions.

You don't do this from your router. In your shell view model you can show a modal that is shared around the application. Follow these instructions - durandaljs.com/documentation/… — PW Kad

Fariz Azmi Fariz Azmi · Accepted Answer · 2014-05-20T05:52:46

Create Custom modal
Use Compose binding
Modifed router on shell view and model

create custom modal

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

and then, modified shell.js and 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 router - how to define view as modal in routes definition

1 Answers