HTML and CSS Reference
In-Depth Information
Next, you give this function at least a fake body:
TodoList.populateTaskList = function () {
var tasks = [
{ description: "Task #1" },
{ description: "Task #2" },
{ description: "Task #3" }
var bindingList = new WinJS.Binding.List(tasks);
var listview = document.getElementById("task-listview").winControl;
listview.itemDataSource = bindingList.dataSource;
listview.itemTemplate = document.getElementById("task-listitem");
The method takes a static array of objects with the property name description and binds it to the
ListView you previously added to the default.html page. The property named description is key here
since it is the property referenced by the list item template. In the amended default.html page, you
should have markup such as what is shown below—which is used to render any data item bound to
the ListView :
<div id="task-listitem" data-win-control="WinJS.Binding.Template">
<div class="listitem"><span data-win-bind="innerText: description"></span></div>
Figure 10-10 provides the current state-of-the-art TodoList application.
FIGURE 10-10 A list view populated with fake tasks.
Search WWH ::

Custom Search