MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

If you were paying attention at the end of Chapter 4, you’ve probably guessed that the template is
an instance of WinJS.Binding.Template. And you’re right! That piece of markup, in fact, comes just
before the control declaration in html/simpleFlipview.html.
Note that a template must always be declared in markup before any controls that reference them:
WinJS.UI.processAll must instantiate the template first because the collection control will be asking
the template to render its contents for each item in the data source. Also remember from Chapter 4 that
instantiating a template removes its contents from the DOM so that it cannot be altered at run time.
You can see this when running the sample: expand the nodes in Visual Studio’s DOM Explorer or Blend’s
Live DOM pane, and you’ll see the root div of the template but none of its children.
In the sample, the prosaically named ItemTemplate is made of an img element and another div
containing an h2. The overlay class on that latter div, if you look at Figure 5-1 carefully, is clearly styled
with a partially transparent background color (see css/default.css for the .overlaidItemTemplate
.overlay selector). This shows that you can use any elements you want in a template, including other
WinJS controls. In the latter case, these are picked up when WinJS.UI.process/ processAll is invoked
on the template. 31
You can also see that the template uses WinJS data-binding attributes, where the img.src, img.alt,
and h2.innerText properties are bound to data properties called picture and title. This shows how
properties of two target elements can be bound to the same source property. (Remember that if you’re
binding to properties of the WinJS control itself, rather than its child elements, those properties must
begin with winControl.)
For the data source, the FlipView’s itemDataSource option is assigned the value of
DefaultData.bindingList.dataSource that you can find in js/DefaultData.js:
var array = [
{ type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
{ type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
{ type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
{ type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
{ type: "item", title: "Valley", picture: "images/Valley.jpg" }
];
var bindingList = new WinJS.Binding.List(array);
WinJS.Namespace.define("DefaultData", {
31 Note that for such controls to be fully interactive, assign the win-interactive class to them, otherwise the surrounding
control (and this applies to ListView as well) will swallow input events before they reach those controls.
182