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

.addEventListener("click", TodoList.addTaskClick);
TodoList.performInitialBinding()
}
Now, when the user clicks the Add Task button, the code defined in the function TodoList.addTask-
Click runs. This code needs be added to the todolist.js file as well.
TodoList.addTaskClick = function () {
TodoList.alert("Add Task button clicked");
}
TodoList.alert = function (message) {
var alertDialog = new Windows.UI.Popups.MessageDialog(message);
alertDialog.showAsync();
}
For now, clicking on the button only shows the user a message box; later on, you'll be rewriting
this code to display a summary of the task being saved.
What if you want to add a tooltip to an element that is already being transformed into a Windows 8
component via the data-win-control attribute? For example, how would you add a tooltip to the date
picker component? Here's some example code:
<div data-win-control="WinJS.UI.Tooltip"
data-win-options="{innerHTML: 'Specify the due for the task'}">
<h3>DUE DATE</h3>
<div class="block-element" id="taskDueDate"
data-win-control="WinJS.UI.DatePicker" />
</div>
As the preceding markup illustrates, all you need to do is use a wrapper div properly configured so
it will transform into a tooltip component at run time.
putting data into the form
So far, you have defined the layout of the form, and with that task complete, it's time to think about
how to bind it to data.
Initializing the input form
In the page initialization, you already have a call to a function called performInitialBinding . You need
to add some code to the body of this function. The expected behavior is fairly simple: the function
needs to get a new Task object and bind its content to the elements of the user interface. When the
purpose of the application form is to add a new task, you can pass a newly created (in other words,
blank) instance of the Task object, which is filled with default values.