Handle mutiple page templates with durandal (hiding modules for specific views)

Question

I'm currently working on a Durandal 2 application. I'm new to this technology and I read a lot of documentation on the subject but I encounter a problem in my website conception.

Most of my views have the same structure (header, menu, content, footer) which is defined in the shell but some pages (like the maintenance page) should not have header, menu and footer.

I've created my shell template but I can't find a way to deactivate the header/menu/footer for this specific view.

The user can't leave the maintenance page until a server call redirect him to the home page. (when the maintenance is over)

I've tried using composition :

<div data-bind="compose: headerModule"></div>

...

if (router.activeInstruction() !== null) {
if (router.activeInstruction().config.moduleId.length > 0) {
    switch (router.activeInstruction().config.moduleId) {
        case "pages/maintenance":
            this.headerModule("");
            break;
        default:
            this.headerModule(this.application.getFullModuleId('modules/header/header'));
            break;
    }
}

}

It works well when I load the page but not when I navigate through the website.

I've tried to use an event to handle this but it doesn't work neither :

router.on('router:navigation:attached', function() { /* same code as above */ });

Maybe I misunderstood something or maybe I do something wrong here but I didn't find a way to hide a module defined in the shell in specific page.

Is there any way to specify multiple "template"? Or, to make an analogy, to have multiple template layers, like master pages in asp.net?

Any idea how I can achieve this?

Thanks in advance...

Are you hiding the header, footer, etc., because you're trying to create a modal context? Or are you simply trying to prevent certain links on the Shell from being clicked? — , Nov 10 '14 at 20:16
Most likely the second option. What I want to achieve is to have most of the pages of my website with the same shared components (modules) like the header, the menu and the footer, which are defined in the shell view (I can edit my original post to show my shell, if it helps). But some pages (a few) doesn't need those components. The maintenance page, for example, doesn't need the website header, menu or footer. I want to hide them or, better yet, deactive them when I navigate through pages. Maybe I should go out of the SPA with a redirection... — spaq, Nov 10 '14 at 21:50
Would you be averse to a modal dialog? I've written a custom dialog context for Durandal (which was remarkably easy to do), where the dialog slide-animates out from the right, leaving the underlying page partly visible. But first, I throw up a "block-ui" that dims the background and sits between the dialog and the shell so as to prevent the shell from being clicked. You can see a video at this link: https://onedrive.live.com/redir?resid=16C2A8798026D00B!178&authkey=!ABf6gbPiPpRcLfI&ithint=video%2cmp4. This is from an early incarnation of our app. — , Nov 11 '14 at 01:33
It would be a good solution if I had something to say about design, which is not the case here. I have design requirements, they're already validated and I really need a whole specific page, not a modal dialog. I keep your idea in mind for future project, though. :-) — spaq, Nov 11 '14 at 09:17

score 0 · Accepted Answer · answered Nov 11 '14 at 13:25

//shell.js
define(function (require) {
   var 

     headerVisible = ko.observable(true),

     pagesWithHeader = [require('page1'), require('page2')],

     router.on('router:navigation:complete').then(function (page, instruction) {
         headerVisible(pagesWithHeader.indexOf(page) !== -1);
     });

  return {
    headerVisible: headerVisible
  }
});


//shell.html
<section id="shell">

    <div data-bind="visible: headerVisible">
      <!-- ko compose: 'header' --><!-- /ko -->
    </div>

    <section data-bind="router: true"></section>

</section>

Handle mutiple page templates with durandal (hiding modules for specific views)

1 Answers1