Integrating with the Windows 8 environment - Build Windows 8 Apps with HTML5 and JavaScript - page 208

Finally, you open todolist.js and modify the content of the displaySummary function as shown
below:
TodoList.displaySummary = function (task) {
// Prepare the content for the flyout
var bindableElement = document.getElementById("flyoutSummary");
WinJS.Binding.processAll(bindableElement, task);
// Display the flyout
var anchor = document.getElementById("buttonAddTask");
var flyoutSummary = document.getElementById("flyoutSummary").winControl;
flyoutSummary.show(anchor);
}
You learned the basics of Windows 8 data binding back in Chapters 5 and 6. In this chapter, you
face a new requirement: formatting the content of data for display purposes. The task you're creating
through the TodoList application has a due date; in the summary, you might want to show the date
as well as the rest of the content. You want, however, to display the date in a common format. The
default format you get, instead, is the ISO format of dates which is not really easy to read for humans.
You need a converter that preprocesses the date just before display. In the markup for the flyout you
entered earlier, you find code like below:
<span data-win-bind="innerText: dueDate TodoList.dateForDisplay">
The SPAN element is being bound to the dueDate property of the Task object; but the real content
is massaged by the TodoList.dateForDisplay function. This function must be added to the todolist.js
file
// Converter to date display in the flyout
TodoList.dateForDisplay = WinJS.Binding.converter(function (value) {
return value.toLocaleDateString();
});
Finally, you add the code that serves as the placeholder for file picking functionality. This code is
invoked when the user clicks on the button now displayed in the flyout to start the save process. Add
this code at the bottom of the todolist.js file
TodoList.pickFileAndSaveTask = function () {
// Get the task object to save
var currentTask = TodoList.getTaskFromUI();
// Placeholder for more interesting things
TodoList.alert("Ready to pick a file and save...");
}