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

I have dened a UI namespace, which contains a List object with displayListItems
and setupListEvents functions. In the displayListItems function, I locate the HTMLElement
objects that represent the template and the target for the generated elements. I have used the
document.getElementById method to locate the elements by their id attribute values.

■ The bold statement in the listing causes an odd Visual Studio problem. Trying to use
autocompletion in this file causes Visual Studio to crash. The only way to avoid this problem is to
disable the autocompletion feature for JavaScript files in the Visual Studio Tools ➤ Options menu.

Tip

he WinJS.Utilities.empty method removed the children for an element, which I do so
that I don't just add new rows to the table each time the function is called.
To iterate through the items in the WinJS.Binding.List object, call the winControl.
render method on the template object for each one. The winControl is created by the WinJS.
UI.processAll method, and it returns the Metro-specific properties created for different types
of user interface controls.
he render method is added to those elements whose data-win-control attribute is
WinJS.Binding.Template . he arguments to the render method are the data item to process
and the target element to which the newly generated content will be added, so, by calling the
render method for each item in my grocery List object, I am able to create table rows to popu-
late my Metro app layout.
Once I have created the table rows, I use the WinJS.Utilities.children method to set up
an event listener for the click events on the newly tr elements.
Finally, I set the ViewModel.State.selectedItemIndex property (which I will define
shortly) to indicate which row has been selected when the click event is received, using the
rowIndex property that is available for tr elements and ensuring that the selected class is
applied only to the row the user has selected.

Responding to List Changes
The other function I defined in the UI namespace is setupListEvents . This function listens for
each of the list events I described in the previous section and, when they are received, calls the
displayListItems function.
This allows me to use my template to render the contents of the table element whenever
the contents of the list change. This is a crude way of handling list changes, but it is sufficient
for a simple example. The event object passed to the handler function contains details of which
list element has changed, which is essential information when implementing a more elegant
approach.

■ I set up the event handlers in a separate function so that I can call displayListItems
repeatedly. If I had set up the event handlers inside the displayListItems function, then a new
set of handlers would be created each time the contents of the list changed.

Tip