HTML and CSS Reference
In-Depth Information
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.
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);
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
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.
Search WWH ::

Custom Search