Application Controls - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 44

■ There are a lot of icons to choose from, far more than the API documentation suggests.
Open the js/ui.js file and search for icon to see the list defined by the enumeration. The enu-
meration just contains common icons; there are even more defined by the font itself.

Tip

Implementing App Bar Buttons
In this section, I will add the code to implement the selection-specific Done button I added to
the AppBar. To do this, I have defined a UI.AppBar namespace in the ui.js file and created the
setupButtons function, which you can see in Listing 3-3.

Listing 3-3. Setting Up Support for the AppBar Buttons
/// <reference path="//Microsoft.WinJS.0.6/js/base.js" />
/// <reference path="//Microsoft.WinJS.0.6/js/ui.js" />
(function () {
"use strict";
WinJS.Namespace.define("UI.AppBar", {
setupButtons: function () {
var doneButton=document.getElementById("done");
ViewModel.State.bind("selectedItemIndex", function (newValue, oldValue) {
doneButton.disabled=(newValue == -1);
});
doneButton.addEventListener("click", function (e) {
var selectedIndex=ViewModel.State.selectedItemIndex;
ViewModel.UserData.getItems().splice(selectedIndex, 1);
ViewModel.State.selectedItemIndex=-1;
});
}
});
WinJS.Namespace.define("UI.List", {
// …code removed for brevity…
});
})();
Since AppBar buttons are created from HTML button elements, I can use the standard
disabled property to control the button state and handle the click event to respond to user
interaction.
I want to control the state of the button in response to changes to the ViewModel.State.
selectedItemIndex property in the view model. To monitor an object with observable proper-
ties, you use the bind method to register a function that will be executed when the value the
property changes. In this listing, I have created a binding for the selectedItemIndex property
so that I can change the status of the button when the user makes a selection. This is a nice
demonstration of how you can use WinJS data bindings to tie view model data, event handler
functions, and HTML elements together.