Book Image

KnockoutJS Essentials

By : Jorge Ferrando, Jorge F Ferrando
Book Image

KnockoutJS Essentials

By: Jorge Ferrando, Jorge F Ferrando

Overview of this book

Table of Contents (16 chapters)
KnockoutJS Essentials
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

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...