使用 WinJS 自定义数据源？

Question

我目前正在 Windows8 应用程序中实现自定义数据源。但是，我遇到了一些问题：没有显示数据。

首先，代码如下：

var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    // Other data taken from Windows8 ListView quick start
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
];

var searchAdDataAdapter = WinJS.Class.define(

     function () {},  // Constructor

     {
         itemsFromIndex: function (requestIndex, countBefore, countAfter) {

             var that = this;

            if (requestIndex >= that._maxCount) {
                return WinJS.Promise.wrapError(new WinJS.ErrorFromName(UI.FetchError.doesNotExist));
            }

            var fetchSize, fetchIndex;

            // See which side of the requestIndex is the overlap.
            if (countBefore > countAfter) {

                // Limit the overlap
                countAfter = Math.min(countAfter, 10);

                // Bound the request size based on the minimum and maximum sizes.
                var fetchBefore = Math.max(
                    Math.min(countBefore, that._maxPageSize - (countAfter + 1)),
                    that._minPageSize - (countAfter + 1)
                );

                fetchSize = fetchBefore + countAfter + 1;
                fetchIndex = requestIndex - fetchBefore;

            } else {
                countBefore = Math.min(countBefore, 10);
                var fetchAfter = Math.max(Math.min(countAfter, that._maxPageSize - (countBefore + 1)), that._minPageSize - (countBefore + 1));
                fetchSize = countBefore + fetchAfter + 1;
                fetchIndex = requestIndex - countBefore;
            }

            // Create an array of IItem objects:
            // results =[{ key: key1, data : { field1: value, field2: value, ... }}, { key: key2, data : {...}}, ...];
            for (var i = 0, itemsLength = dataArray.length ; i < itemsLength ; i++) {

                var dataItem = dataArray[i];
                results.push({
                    key: (fetchIndex + i).toString(),
                    data: dataArray[i]
                });
            }

            // Get the count.
            count = dataArray.length;

            return {
                items: results, // The array of items.
                offset: requestIndex - fetchIndex, // The index of the requested item in the items array.
                totalCount: count
            };

        },

        getCount: function () {
            return dataArray.length;
        }
    }
);

var searchAdDataSource = WinJS.Class.derive(WinJS.UI.VirtualizedDataSource, function () {
    this._baseDataSourceConstructor(new searchAdDataAdapter());
});

// Create a namespace to make the data publicly
// accessible. 
var publicMembers = {
    itemList: new searchAdDataSource()
};

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

我知道代码有点长，但主要部分来自微软官方自定义数据源快速入门。

我尝试调试它，但似乎从未使用过 itemFromIndex 中包含的代码（我的断点从未到达）。

HTML代码是：

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

我暂时不使用任何模板，以尽可能简化代码。数据通常以这种方式以文本形式显示（但什么也不显示）。

对这个伟大的社区有任何想法吗？

此外，即使有文档，我也不了解 countBefore 和 countAfter 参数。有人可以用其他语言向我解释吗？

非常感谢！ :)

Answer 1

尝试将您的 HTML 代码修改为以下内容：

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

无需调用 .datasource 成员，因为您直接与数据源对话。