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);
});
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.
Tip
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>
<html>
<head>
<meta charset="utf-8">
Search WWH ::
Custom Search