locked
Issue with Navigation Event Handler for Listview RRS feed

  • 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