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

Question

我是 Windows 应用程序开发的新手，我正在尝试创建一个 ListView 以了解它的工作原理。我的问题是我试图在我的 ListView div 上使用命名空间，它 returns 错误说属性数据源不存在。

这是我的 html 和 javascript:

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre><code>    // 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>

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 正在检索数据

Windows App Development - ListView retrieving data

javascript

windows

winjs