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

// statements to add test data removed for brevity
})();
Creating a List is simple, but you will encounter problems if you try to do so within the
scope of an object that has passed to the WinJS.Binding.as method (there is a clash of assump-
tions over the value of the special this variable). To avoid this problem, define your lists outside
of the view model, as I have done in the example.
Using a List object isn't the same as using an array. The most important difference is that
you cannot use array indexers to read or write data values. Instead, you must use the getAt and
setAt methods. Other array members, such as push and pop , are supported by List , and there
are some useful additions for sorting and projecting the contents of List objects.
Another important difference is that you cannot access array values using declarative
bindings. Instead, you must set values in the DOM using JavaScript and handle events emitted
by the List object to keep those values up-to-date. Listing 2-9 shows elements in the default.
html file that display the number of items in one of the view model lists and some buttons to
add and remove items.
Listing 2-9. Elements for Interacting with a List Object
…
<div id="leftContainer" class="gridLeft">
<h1 class="win-type-xx-large">Left Full Container</h1>
<div class="win-type-x-large">
The last item is<span id="listInfo"></span>
</div>
<div class="win-type-x-large">
<button id="addItemButton">Add Item</button>
<button id="removeItemButton">Remove Item</button>
</div>
</div>
…
There are no special data attributes in these elements, just regular HTML. Everything
happens in the default.js file, as shown in Listing 2-10.
Listing 2-10. Using JavaScript to Bridge Between HTML Elements and a WinJS.Binding.List
…
function performInitialSetup(e) {
WinJS.Utilities.query('button').listen("click", function (e) {
if (this.id == "addItemButton") {
ViewModel.UserData.addItem("Ice Cream", 1, "Vanilla", "Walmart");
} else {
ViewModel.UserData.getItems().pop();
}
});
var setValue=function () {
var list=ViewModel.UserData.getItems();