Working with remote data - Build Windows 8 Apps with HTML5 and JavaScript - page 284

Adding pictures to the user interface
To display the retrieved pictures, you can use a Windows 8 ListView . In default.html you already have
a DIV element bound to the ListView component. The next step consists of binding the ListView to a
data source and defining an item template.
Because you just want to display pictures, the HTML item template can be simple, as shown below:
<div id="picturesItemTemplate"
data-win-control="WinJS.Binding.Template" style="display: none;">
<div class="listItem">
<img id="picture" data-win-bind="src: photoUrl" alt="" />
</div>
</div>
The src attribute of the IMG element is bound to the photoUrl property of the bound data object.
You add the template at the beginning of the body for the default.html page.
As you did in the first exercise of this chapter, you also define a binding list object at the top of the
flickrApp.js ile:
WinJS.Namespace.define("FlickrFeed", { Pictures: new WinJS.Binding.List() });
You populate the list during the enumeration of the JSON content.
flickrApp.parseFeed = function (json) {
var pictures = JSON.parse(json);
for (var i = 0; i < pictures.items.length; i++) {
var pictureElement = {};
pictureElement.photoUrl = pictures.items[i].media.m;
// Add the object to the listview
FlickrFeed.Pictures.push(pictureElement);
}
}
Finally, you bind the ListView to the FlickrFeed.Pictures list. In default.html you add the following
markup:
<div id="picturesList" data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: FlickrFeed.Pictures.dataSource,
itemTemplate: picturesItemTemplate,
layout: {type: WinJS.UI.GridLayout} }">
</div>