Question

我是Windows App Development的新手，我正在尝试创建一个ListView以了解它的工作原理。我的问题是我试图在我的ListView div上使用命名空间，它返回错误，说明属性dataSource不存在。

这是我的html和javascript：



    // For an introduction to the Page Control template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232511
    (function () {
        "use strict";

        WinJS.UI.Pages.define("/pages/episodes/episodes.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) {
                // TODO: Initialize the page here.
                Episodes.Data.assignItems(items);
                WinJS.UI.processAll();
            },

            unload: function () {
                // TODO: Respond to navigations away from this page.
            },

            updateLayout: function (element) {
                /// <param name="element" domElement="true" />

                // TODO: Respond to changes in layout.
            },

        });

        WinJS.Namespace.define("Episodes.Data", {
            itemsBindingList: undefined,

            assignItems: function (items) {
                Episodes.Data.itemsBindingList = new WinJS.Binding.List(items);
            },
        });

        var items = [
            { title: 'Air Gear' },
            { title: 'Bakuman' }
        ];

    })();
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>episodes</title>

        <link href="episodes.css" rel="stylesheet" />
        <script src="episodes.js"></script>
    </head>
    <body>
        <div class="episodes fragment">
            <header class="page-header" aria-label="Header content" role="banner">
                <button class="back-button" data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to episodes</span>
                </h1>
            </header>
            <section class="page-section" aria-label="Main content" role="main">
                <div data-win-control="WinJS.UI.ListView" data-win-options="{
                     itemDataSource : Episodes.Data.itemsBindingList.dataSource
                     }"></div>
            </section>
        </div>
    </body>
    </html>

由于我在.js文件中使用匿名函数，因此我创建了一个可以在.html文件上使用的命名空间。在ListView div中，我有这个：

    // For an introduction to the Page Control template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232511
    (function () {
        "use strict";

        WinJS.UI.Pages.define("/pages/episodes/episodes.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) {
                // TODO: Initialize the page here.
                Episodes.Data.assignItems(items);
                WinJS.UI.processAll();
            },

            unload: function () {
                // TODO: Respond to navigations away from this page.
            },

            updateLayout: function (element) {
                /// <param name="element" domElement="true" />

                // TODO: Respond to changes in layout.
            },

        });

        WinJS.Namespace.define("Episodes.Data", {
            itemsBindingList: undefined,

            assignItems: function (items) {
                Episodes.Data.itemsBindingList = new WinJS.Binding.List(items);
            },
        });

        var items = [
            { title: 'Air Gear' },
            { title: 'Bakuman' }
        ];

    })();

我正在使用命名空间来检索我想要在ListView上显示的数据。我的问题是我收到错误说：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>episodes</title>

        <link href="episodes.css" rel="stylesheet" />
        <script src="episodes.js"></script>
    </head>
    <body>
        <div class="episodes fragment">
            <header class="page-header" aria-label="Header content" role="banner">
                <button class="back-button" data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to episodes</span>
                </h1>
            </header>
            <section class="page-section" aria-label="Main content" role="main">
                <div data-win-control="WinJS.UI.ListView" data-win-options="{
                     itemDataSource : Episodes.Data.itemsBindingList.dataSource
                     }"></div>
            </section>
        </div>
    </body>
    </html>

Answer 1

据我所知，你的财产最初是未定义的：

WinJS.Namespace.define("Episodes.Data", {
            itemsBindingList: undefined, //this is a problem

            assignItems: function (items) {
                Episodes.Data.itemsBindingList = new WinJS.Binding.List(items);
            },
        });

然后你的html尝试绑定到未定义对象的属性：

<section class="page-section" aria-label="Main content" role="main">
                <div data-win-control="WinJS.UI.ListView" data-win-options="{
                     itemDataSource : Episodes.Data.itemsBindingList.dataSource
                     }"></div>
            </section>

尝试使用空数组进行初始化：

WinJS.Namespace.define("Episodes.Data", {
            itemsBindingList: new WinJS.Binding.List([]),

            assignItems: function (items) {
                Episodes.Data.itemsBindingList = new WinJS.Binding.List(items);
            },
        });

或者您可以在代码中设置数据源：

ready: function (element, options) {
                // TODO: Initialize the page here.
                var listView = document.getElementById('myListView').winControl;
                Episodes.Data.assignItems(items);
                listView.data = Episodes.Data.itemsBindingList;
                WinJS.UI.processAll();
            },

您可以通过在ready函数中调试来验证这一点，并且应该在断点被击中之前发生异常。

Windows应用程序开发 - ListView检索数据

1 个答案: