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:
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();Define the
views/accordion.htmlfile. Notice that inside the accordion binding you can define thedata-parttemplates. Here, you are using the power of composition that Durandal gives you. By adding anaddbutton, 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...