Adding a View Module to the Hot Towel Template

Once you get the Hot Towel Template from John Papa inserted into your solution, where do you go next? This post gives you the steps to create a Durandal view module which consists of the view in html form, a view model in javascript, and the nav bar link to the module. It is not hard at all. Here are the steps:

1. Choose a name for your module. Let's say "orders" for this example.

2. Duplicate one of the existing views in App/views and rename it "orders.html"

3. Duplicate one of the existing viewmodels in App/viewmodels and rename it "orders.js"

4. Go into orders.js and change the title of the view to "Orders View"

var vm = {
    activate: activate,
    title: 'Orders View'
};

5. Also in orders.js, change the activation message:

logger.log('Orders View Activated', null, 'orders', true);

Notice that message is changed as is the source argument. 

6. Go into App/viewmodels/shell.js and add a link to the new module to the nav bar:

function boot() {
    router.mapNav('home');
    router.mapNav('details');
    router.mapNav('orders');
    log('Hot Towel Loaded!', null, true);
    return router.activate('home');
}

7. Run your application. You'll see the new view module appear in the app.