HTML and CSS Reference
In-Depth Information
var bindingList = new WinJS.Binding.List(tasks);
var listview = document.getElementById("task-listview").winControl;
listview.itemDataSource = bindingList.dataSource;
listview.itemTemplate = document.getElementById("task-listitem");
As you may notice, the need for using asynchronous methods requires an extra effort to keep
code readable and properly formatted. Also, keep in mind that any operation on folder content must
be wrapped in a then callback.
As a final touch, you might want to add a bit of code here to sort tasks by date. That entails adding
a couple of lines of code to the bindingList object. Here's the code you need in the final then block
where the binding takes place:
var bindingList = new WinJS.Binding.List(tasks);
// Now sort the content of the list before binding to the listview
bindingList = bindingList.createSorted(function (first, second) {
return first.dueDate > second.dueDate;
You also might want to use a slightly more sophisticated template for the ListView items. Instead
of simply showing the name of the file (or the description of the task), you might also want to display
the due date so that the sorting makes more sense to the user. Here's a modified template for the
ListView items:
<div id="task-listitem" data-win-control="WinJS.Binding.Template">
<div class="listitem">
<span data-win-bind="innerText: dueDate TodoList.dateForDisplay"></span>
<br />
<span data-win-bind="innerText: description"></span>
At this point, you're all set as far as listing tasks are concerned, as you can see in Figure 10-11. You
now need to adjust the code that saves tasks to the local (or roaming) folder.
Search WWH ::

Custom Search