Adding persistent data to applications - Build Windows 8 Apps with HTML5 and JavaScript - page 254

Well, not exactly! To really get the outcome of Figure 10-8, you also need to add some script to
todolist.js.
The idea of the new application is that the user picks a task from the left-side list and edits it in the
rightmost panel. If the user wants to create a new task, she clicks the New button on the top of the list
view. This means that there's no need any more to create and display an empty task at the start of the
application. For the moment, all changes are limited to TodoList.init .
You begin by ensuring that the following line exists at the beginning of the method. It is
reasonable to expect that this line is already in place, because all you did with respect to the older
version of the application was move the New button to a different position in the page.
document.getElementById("buttonNewTask").addEventListener("click", TodoList.
newTaskClick);
At the bottom of the TodoList.init method, you also comment out (or just remove) the following
line:
// TodoList.displayTask(new Task());
The TodoList.displayTask still remains a key asset of your script; it will just be called from other
places. The method needs some changes too:
TodoList.displayTask = function (task) {
TodoList.performInitialBinding(task);
// Ensure the editor is visible
var editor = document.getElementById("editor-container");
editor.style.display = "block";
}
In particular, the displayTask method now needs to ensure that the task editor is visible, since the
changes in the CSS file you made earlier just keep the editor hidden upon the application's start.
When the user clicks the New button, she should get back the familiar interface of the TodoList
application, as shown in Figure 10-9.