WinJS Binding: Binding Templates


Now that we've learned about Binding Lists, let's talk about Binding Templates. Binding Templates are used to render the same user interface multiple times with different data.

We turn a div into a template by giving the attributate data-win-control the value WinJS.Binding.Template, and adding the options you want in the data-win-options attribute. More generally, a template is expressed using a WinJS.Binding.Template control.

<div class="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template">

The template div only provides the template for display and doesn't show on the screen itself. Another div, which can be any WinJS control that requires a Binding Template, takes a Binding List and uses the template to display the data.

<div id="listView"
    class="win-selectionstylefilled"
    data-win-control="WinJS.UI.ListView"... >

One of the most common controls used with Binding Templates is the ListView. A ListView is basically a much more powerful Repeater. It can group items, change the orientation and layout and otherwise customize the behavior of the list. Most importantly, it virtualizes the items into the DOM, unlike the Repeater. Virtualization means that the ListView only loads the data needed for display, forgetting everything that is farther away in the list. This speeds up the display and avoids hogging memory with content that the users may never see.

For collection controls other than a ListView or Repeater, the second div most commonly contains the list that will be cut out.

The Template Control contains the different elements that will be stamped out. The actual stamper is just a div that pulls the class information of the template.

You can bind Binding List data to a template. Some common information that you may want to bind from a Binding List are pictures, used with a data-win-bind="src: url" syntax, and text, used with a data-win-bind="textContent: mytext” syntax. Refer back to the generic data-win-bind lesson from earlier for a refresher.

You can also bind data for other controls to use. For example, if you wanted a rating control inside the ListView

<div data-win-control="WinJS.UI.Rating" data-win-bind="winControl.maxRating: maxRating" ></div>

The winControl.maxRating is necessary here because we are setting an option of the Rating Control that we attached to this div. This grabs the Rating control and allows us to create a binding to the “maxRating” option from a JavaScript object rather than hard-coding it within the data-win-option attribute.

<div class="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image"
            data-win-bind="src: picture" />
    </div>
</div>

<div id="listView"
    class="win-selectionstylefilled"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{
        itemDataSource: Sample.ListView.data.dataSource,
        itemTemplate: select('.smallListIconTextTemplate'),
        selectionMode: 'none',
        tapBehavior: 'none',
        layout: { type: WinJS.UI.ListLayout }
    }">
</div>

Here you can see how we identify which control we are using, and it is a ListView control. We grab the primary options: itemDataSource, which is where the data is coming from and the itemTemplate which is the class of the template snippet above. A few other advanced options such as presenting it as a Grid Layout ListView and how we want tap and select to be handled.


Try It Out

Check It Out

Here we're going to add a ListView control to our app. A ListView is similar to a Repeater except it virtualizes data and has tons of additional features.

In the HTML:

  1. Add the Binding Template constructor to the appropriate div with the class myListTemplate.
  2. <div class="myListTemplate" data-win-control="WinJS.Binding.Template">
  3. Fill in the data-win-control attribute for the div with an id="listView".
  4. <div id="listView" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" ... >
  5. Add the ListView's Binding List to the itemDataSource attribute within data-win-options.
    Note that you need to add a .dataSource to the Binding List to utilize the information.
    (Hint: it is the same as the repeater, with an additional ".dataSource")
  6. <div id="listView" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myList.data.dataSource, ... >

Check the output, to see if the list shows. Compare the ListView to the Repeater in the last section!

Clicking "Yes" will replace the code in the editor with the correct code.
Are you sure you want to do this?