The user interface of Windows Store applications - Build Windows 8 Apps with HTML5 and JavaScript - page 139

However, if the form is being used to edit existing, previously created tasks, then your code must
first retrieve the task to edit, load that data into a fresh instance of the Task object, and then display
it through the user interface.
TodoList.performInitialBinding = function () {
// This may also be a Task object retrieved from some storage
var task = new Task();
// Enable binding on the HTML element(s) of choice
var bindableElement = document.getElementById("form-container");
WinJS.Binding.processAll(bindableElement, task);
// Set the date on the date picker
var datePicker = document.getElementById("taskDueDate").winControl;
datePicker.current = task.dueDate;
// Select the status on the drop-down list
var dropDownList = document.getElementById("taskStatus");
dropDownList.selectedIndex = TodoList.getIndexFromStatus(task.status);
}
Data binding works in a cascading manner, in the sense that you attach a data source object to
a container element and then use the WinJS library to resolve dependencies for you. You establish a
dependency between a user interface element and a property in the data source through the data-
win-bind attribute. You can do that through markup attributes, in which case the data binding is
called declarative data binding . You'll see how to create a declarative binding first. (You can also create
bindings programmatically rather than declaratively, as you'll see shortly.)
The preceding code shows how to link a data source—the newly created Task object—to the div
element that contains the entire form. This div is the element you are binding. The creation of the link
passes through the processAll function.
Unfortunately, in WinJS, not all components fully support declarative data binding. Data binding works
great as long as you want to bind data to plain HTML elements. If you have more ambitious goals, such as
binding the due date of a Task object to the displayed date of a date picker component, then declarative
data binding is not fully supported. Likewise, declarative data binding is not supported on plain HTML
drop-down lists and Windows 8 doesn't offer any alternative to plain drop-down lists.
What does this mean to developers?
Quite simply, developers must write some extra lines of code to programmatically bind data to
user interface elements. The lines below, excerpted from the TodoList.performInitialBinding, show how
to programmatically force the date picker to display a particular date and how to programmatically
select an element on a drop-down list using the selectedIndex property.
// Set the date on the date picker
var datePicker = document.getElementById("taskDueDate").winControl;