MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

FIGURE 5-4 ListView elements as shown in the Grid App template home page. (All colored items are added labels
and lines.)
There’s quite a bit going on with the ListView in this project, so we’ll take one part at a time. For
starters, the control’s markup in pages/groupedItems/groupedItems.html is very basic, where the only
option is to indicate that the items have no selection behavior:
Switching over to pages/groupedItems/groupedItems.js, the page’s ready method handles
initialization:
ready: function (element, options) {
var listView = element.querySelector(".groupeditemslist").winControl;
listView.groupHeaderTemplate = element.querySelector(".headerTemplate");
listView.itemTemplate = element.querySelector(".itemtemplate");
listView.oniteminvoked = this._itemInvoked.bind(this);
// (Keyboard handler initialization omitted)...
this.initializeLayout(listView, appView.value);
listView.element.focus();
},
Here you can see that the control’s templates can be set in code just as easily as from markup, and in
this case we’re using a class to locate the template element instead of an id. Why does this work? It’s
because we’ve actually been referring to elements the whole time: the app host automatically creates a
variable for an element that’s named the same as its id. It’s the same thing. In code you can also provide
192