Data and Bindings - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 33

he second table element contains the template. The template itself is defined by the
tbody element, but it is an oddity of WinJS templates that they need to be within well-formed
HTML. You can't just dene the tbody element as a child of the body , for example, because
tbody elements aren't allowed to be children of body elements. This means you end up with
some redundant elements in the HTML document when using templates.
Using the Template
The template is denoted by a data-win-control value of WinJS.Binding.Template . This tells
WinJS to process the element, look for declarative bindings, and add some special properties to
the HTMLElement object that represents the template element in the DOM. As mentioned previ-
ously, I like to break my projects up so that there JavaScript files for each area of functionality. To
that end, I have created a new JavaScript file called ui.js , which is shown in Listing 2-12.
Listing 2-12. Using a Template in the ui.js File
/// <reference path="//Microsoft.WinJS.0.6/js/base.js" />
/// <reference path="//Microsoft.WinJS.0.6/js/ui.js" />
(function () {
"use strict";
WinJS.Namespace.define("UI.List", {
displayListItems: function () {
var templateElement=document.getElementById("itemTemplate");
var targetElement=document.getElementById("itemBody");
WinJS.Utilities.empty(targetElement);
var list=ViewModel.UserData.getItems();
for (var i=0; i<list.length; i++) {
templateElement.winControl.render(list.getAt(i), targetElement);
}
WinJS.Utilities.children(targetElement).listen("click", function (e) {
ViewModel.State.selectedItemIndex=this.rowIndex - 1;
WinJS.Utilities.children(targetElement).removeClass("selected");
WinJS.Utilities.addClass(this, "selected");
});
},
setupListEvents: function () {
var eventTypes=["itemchanged", "iteminserted", "itemmoved", "itemremoved"];
var itemsList=ViewModel.UserData.getItems();
eventTypes.forEach(function (type) {
itemsList.addEventListener(type, UI.List.displayListItems);
});
},
});
})();