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

Making any displayed news item clickable
The first step in taking control of a user-click of a displayed news item will look familiar if you have
completed all the exercises in previous chapters. Edit the options for the ListView to configure direct
selection on tap behavior and enable single selection:
<div id="newslist"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: RssReader.Items.dataSource,
itemTemplate: newsItemTemplate,
layout: {type: WinJS.UI.ListLayout},
selectionMode: 'single',
tapBehavior: 'directSelect' }">
</div>
Next, in the rssReaderApp.js file, register a handler for the itemInvoked event of the ListView object.
rssReaderApp.init = function () {
var listview = document.getElementById("newslist");
listview.addEventListener("iteminvoked", rssReaderApp.preview);
// Rest of the code here
...
}
Finally, you get to write the code that displays the news description.
Displaying raw HTML
Depending on the RSS feed you have retrieved, you may receive plain text or rich HTML as the news
description. You might decide to sanitize the content, removing and/or escaping any HTML tags you
encounter in the text. To do so, you pass the description to a function that returns a clean string.
Alternatively, you might decide that you want to display rich HTML, especially when the platform—
like the Windows 8 platform—gives you full access to the rendering capabilities of a web browser.
The primary reason for making a decision between the two approaches is how much you trust the
RSS provider and the overall level of security of the platform. If you were, for example, writing a
website that retrieves data from a source provided by a user, you should be warned in advance: don't
display raw HTML! In contrast, if you're getting data from a single and well-known RSS provider in the
context of a Windows 8 application, showing potentially unsafe HTML is definitely doable. Here's the
code to preview the selected news:
rssReaderApp.preview = function (e) {
var index = e.detail.itemIndex;
var currentArticle = RssReader.Items.getAt(index);
var amended = currentArticle.description;
amended = amended.replace("src=" + '"//', "src=" + '"http://');