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

News feed, but many other RSS feeds omit the category node. To avoid runtime exceptions, you should
check to make sure that the category node exists before attempting to read it programmatically. To
stay on the safe side, you might also want to extend such a check to any node you attempt to read
generically from an RSS feed. You never know what you will really get from web servers!
The second thing to notice in the preceding code is the RssReader.Items collection, which stores
all the parsed news items. In the exercises you completed in past chapters, you always managed data
binding programmatically. In other words, you always wrote some script code to bind a collection of
data to a Windows 8 ListView object, or to any other bindable user interface components.
But in this exercise you'll do something different. You can also create data bindings declaratively,
at design time. This is where the RssReader object comes into play. You define this object at the top of
the rssReaderApp.js file, as shown below:
WinJS.Namespace.define("RssReader", { Items: new WinJS.Binding.List() });
The RssReader object is given a property named Items initialized to an empty binding list. During
the loop, the parser just adds news items to the RSSReader object's Items collection. Subsequently, the
RssReader.Items object will become the data source for the ListView you created in the user interface.
Note You can code data binding either programmatically or declaratively; it's fully
functional either way. The choice between programmatic and declarative data binding is
primarily a matter of personal preference.
Mapping an rSS feed item to the user interface
Now you're ready to map the news content to the HTML template which will render items within the
ListView . Here's a sample HTML template:
<div id="newsItemTemplate"
data-win-control="WinJS.Binding.Template" style="display: none;">
<div class="listItem">
<div id="titleDiv" data-win-bind="innerText: title"></div>
<div id="categoryDiv" data-win-bind="innerText: category"></div>
<div id="pubDateDiv" data-win-bind="innerText: pubDate"></div>
</div>
</div>
As you can see, the template grabs data from title , category, and pubDate properties of the bound
news object. You're almost done. The final step consists of binding the ListView itself to its data
source. You do this declaratively in the default.html file through the data-win-options attribute.
<div id="newslist"
data-win-control="WinJS.UI.ListView"