Search code examples
javascriptwindows-8expression-blendwindows-store-apps

ListView Not Showing Data

I'm following the tutorial at the beginning of Building Windows 8 Apps with JavaScript. My ListView is simply not showing the data, and I'm not sure where to turn. It looks like it's simple and easy, but I must be missing something. When I run the app (or view it in Blend), I see everything but the ListView data. Any idea what I'm missing?

This is the result:

enter image description here

This is the HTML:

<body>
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Bob's RSS Reader</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div>List of feeds:</div>
            <div data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource:feeds.dataSource}"></div>
        </section>
    </div>
</body>

And this is the home.js file:

(function () {
    "use strict";

    window.feeds = [
        { title: "Brandon Satrom",
            url: "http://feeds.feedburner.com/userinexperience/tYGT" },
        { title: "Chris Sells",
            url: "http://sellsbrothers.com/posts/?format=rss" },
        { title: "Channel 9",
            url: "http://channel9.msdn.com/Feeds/RSS" },
    ];

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {

        }
    });
})();
Solution

  • I was able to get it working by using the guidance here. This solution creates a namespace to make the data publicly available. While, this works, I don't understand why my original code didn't work. I thought that window.feeds would be available to the HTML... guess not.

    HTML:

    <div data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource: DataExample.itemList.dataSource}"></div>

    JavaScript:

    (function () {
    "use strict";

    var dataArray = [
        { title: "Brandon Satrom",
            url: "http://feeds.feedburner.com/userinexperience/tYGT" },
        { title: "Chris Sells",
            url: "http://sellsbrothers.com/posts/?format=rss" },
        { title: "Channel 9",
            url: "http://channel9.msdn.com/Feeds/RSS" },
    ];

    var dataList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly accessible. 
    var publicMembers =
    {
        itemList: dataList
    };

    WinJS.Namespace.define("DataExample", publicMembers);

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {

        }
    });
})();