HTML and CSS Reference
In-Depth Information
document.getElementById("listInfo").innerText =
list.getAt(list.length - 1).item;
var eventTypes=["itemchanged", "iteminserted", "itemmoved", "itemremoved"];
eventTypes.forEach(function (type) {
ViewModel.UserData.getItems().addEventListener(type, setValue);
he List object defines four events that are triggered when the data items change. These
events are itemchanged , iteminserted , itemmoved , and itemremoved . he List object denes
an addEventListener method that allows for the registration of event handler functions for
these events. In the listing, I register the same handler function for all four events; it updates
the innerText property of the span element to display the item property of the first element in
the List .
he two button elements add and remove items from the List . I have left the addItem
method in the view model because I prefer to have little helper functions like this to make the
structure of the data objects more consistent, but I could have directly called the push method
on the List object to get the same effect. You can see the result in Figure 2-3 .
Figure 2-3. Displaying details of List objects in HTML elements
I was able to remove the call to the WinJS.Binding.processAll method from this
listing because there are no declarative bindings in the HTML document.
Using Templates
List objects come into their own when used with binding templates , which allow for regions
of markup to be duplicated for a series of data values. Templates are defined within the HTML
document and annotated with the data-win-control attribute, as shown in Listing 2-11.
Listing 2-11. Adding a Template to the HTML Document
<!DOCTYPE html>
<meta charset="utf-8">
Search WWH ::

Custom Search