IT:AD:Durandal.JS:HowTo:First Pages

(UP)

Summary

Once Durandal is installed ( IT:AD:Durandal.JS:HowTo:Install), create a start page.

It can be any html or ASP.NET cshtml page – eg: index.cshtml – containing the basics:


<body>
  <callout icon="true" type="id="applicationHost""></callout>
  <script type="text/javascript" src="/App/durandal/amd/require.js" data-main="/App/main"></script>
</body>

Notice:
- The applicationHost div is the container within which your app's views will live
- The script tag's data-main pulls in App/main.js

Main.js


define(function(require) {
    var app = require('durandal/app');
    var viewLocator = require('durandal/viewLocator');
    var system = require('durandal/system');
    var router = require('durandal/plugins/router');
 
    system.debug(true);
 
    app.start().then(function () {
        viewLocator.useConvention();
        
        router.useConvention();
        router.mapNav('welcome');
        router.mapNav('flickr');
 
        app.adaptToDevice();
        
        //Set the Root view:
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

(Optionally turn on debugging).
Call app.start().
Configure your app-specific conventions (and optionally routing too).
Configure 3rd party libraries.
Set your application's root to the shell module – which is the shell.js paired with a shell.html

app/viewmodels/shell.js contains:

define(function(require) {
    var router = require('durandal/plugins/router');
 
    return {
        router: router,
        activate: function () {
            return router.activate('welcome');
        }
    };
});

and is matched by

app/views/shell.html

<div>
    <callout icon="true" type="class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <ul class="nav" data-bind="foreach: router.visibleRoutes">
                <li data-bind="css: { active: isActive }">
                    <a data-bind="attr: { href: hash }, html: name"></a>
                </li>
            </ul">
        </callout>
    </div>
    
    <callout icon="true" type="class="container-fluid page-host">
        <!--ko compose: { 
            model: router.activeItem,
            afterCompose: router.afterCompose,
            transition:'entrance'
        }--><!--/ko--">
    </callout>
</div>

Note: the default pairing is to a *.html file -- for ASP.MVC *.cshtml pages, that will have to be adjusted .... later.

IT:AD:Durandal.JS:HowTo:First Pages

Summary

Process

Index.html

Main.js

Shell Module

Notes