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>