Answered by:
Issue with Navigation Event Handler for Listview

Question
-
Hi Guys,
I have a simple listview and I'm trying to invoke a click event when a user clicks on an item in the listview. Nothing seems to be happening when an item is click. Adding a breakpoint, it doesnt seem to even execute the invoked function. Not sure if I'm missing something obvious here.
data.js ...
(function () { "use strict"; // Set up array variables var dataPromises = []; var videos; // Create a data binding for our ListView var videoResults = new WinJS.Binding.List(); // Process the video feeds function getFeeds() { videos = [ { key: "Bookmarks", url: 'xml url here', title: 'tbd', updated: 'tbd', backgroundImage: 'tbd', acquireSyndication: acquireSyndication, dataPromise: null }, { key: "History", url: 'xml url here', title: 'tbd', updated: 'tbd', backgroundImage: darkGray, acquireSyndication: acquireSyndication, dataPromise: null }, { key: "Playlist", url: 'xml url here', title: 'tbd', updated: 'tbd', backgroundImage: darkGray, acquireSyndication: acquireSyndication, dataPromise: null }, { key: "Browse", url: 'xml url here', title: 'tbd', updated: 'tbd', backgroundImage: darkGray, acquireSyndication: acquireSyndication, dataPromise: null }, { key: "Popular", url: 'xml url here', title: 'tbd', updated: 'tbd', backgroundImage: darkGray, acquireSyndication: acquireSyndication, dataPromise: null }, { key: "New", url: 'xml url here', title: 'tbd', updated: 'tbd', backgroundImage: darkGray, acquireSyndication: acquireSyndication, dataPromise: null }]; videos.forEach(function (feed) { feed.dataPromise = feed.acquireSyndication(feed.url); dataPromises.push(feed.dataPromise); }); return WinJS.Promise.join(dataPromises).then(function () { return videos; }); } function acquireSyndication(url) { return WinJS.xhr({ url: url }); } function getvideoResults() { getFeeds().then(function () { videos.forEach(function (feed) { feed.dataPromise.then(function (articlesResponse) { var articleSyndication = articlesResponse.responseXML; feed.title = feed.key; //feed.backgroundImage = articleSyndication.selectSingleNode("//*[name()='media:thumbnail']").text; getItemsFromXml(articleSyndication, videoResults, feed); }); }); }); return videoResults; } function getItemsFromXml(articleSyndication, videoResults, feed) { // Get the info for each video post var posts = articleSyndication.selectNodes("//item"); var t = feed.key; var y = t; // Process each video post for (var postIndex = 0; postIndex < posts.length; postIndex++) { var post = posts[postIndex]; var postTitle = post.selectSingleNode("title").text; var type = ""; var image = $(post).find("media\\:thumbnail").last(); var res = image.attr("url"); videoResults.push({ group: feed, classType: type, key: feed.title, title: postTitle, date: postDate, backgroundImage: res }); } } // Organize the data for display function getGroupedData() { return videoResults.createGrouped(function (item) { return item.group.key; }, function (item) { return item.group; }, function (l, r) { return l < r; }); } function getItemsFromGroup(group) { return list.createFiltered(function (item) { return item.group.key === group.key; }); } var list = getvideoResults(); var groupedItems = getGroupedData(); WinJS.Namespace.define("data", { items: groupedItems, groups: groupedItems.groups, getItemsFromGroup: getItemsFromGroup }); })(); function groupInfo() { return { multiSize: true, slotWidth: 10, slotHeight: 10 }; }
Nothing happens when an item is clicked...
HTML..
<div class="itemtemplate" data-win-control="WinJS.Binding.Template" style="display: none"> <div data-win-bind="className: classType"> // text in here </div> </div>
- Edited by Solarpitch Thursday, May 3, 2012 2:51 PM
Thursday, May 3, 2012 2:49 PM
Answers
-
Turns out I needed an event handler :o|
<div data-win-control="WinJS.UI.ListView" data-win-options="{oniteminvoked : handler}">
- Marked as answer by Solarpitch Thursday, May 3, 2012 3:08 PM
Thursday, May 3, 2012 3:08 PM