Building a page with Durandal

Now that you have learned all the basics of the Durandal framework, let's create a new page that will contain our widget and some basic data.

To define a new page in Durandal, always follow the same steps:

1. Define the route in the shell view-model:

   router.map([
   { route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true },
   { route: 'flickr', moduleId: 'viewmodels/flickr', nav: true },
   { route: 'accordion', moduleId: 'viewmodels/accordion', nav: true }
   ]).buildNavigationModel();

2. Define the views/accordion.html file. Notice that inside the accordion binding you can define the data-part templates. Here, you are using the power of composition that Durandal gives you. By adding an add button, you are giving the widget the possibility of adding new elements.

   <div>
     <h2 data-bind="text:title"></h2>
     <div data-bind="accordion: {items:projects, headerProperty:'name'}">
       <div data-part="header">
         <span data-bind="text:name...