Question

我正在Building Windows 8 Apps with JavaScript开头学习本教程。我的ListView根本没有显示数据，我不知道在哪里转。它看起来简单易行，但我必须遗漏一些东西。当我运行应用程序（或在Blend中查看它）时，我会看到除ListView数据之外的所有内容。知道我错过了什么吗？

结果如下：

enter image description here

这是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>

这是home.js文件：

(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) {

        }
    });
})();

Answer 1

我可以使用指南here让它工作。此解决方案创建了一个名称空间，以使数据公开可用。虽然，这工作，我不明白为什么我的原始代码不起作用。我认为window.feeds可用于HTML ...猜不是。

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) {

        }
    });
})();

Answer 2

它无法正常工作的原因是您没有将其设置为绑定列表。普通的javascript数组不包含dataSource属性。另外，不要忘记使用'new'关键字。我忘了并花了相当多的时间试图找出它失败的原因。

window.feeds = new WinJS.Binding.List([
        { 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" },
    ]);

ListView不显示数据

2 个答案: