javascript - 无法将 Rest JSON 数据绑定(bind)到 WinJS 中的 ListView 控件

我正面临一个问题。我正在尝试将 ListView WinJS 控件绑定(bind)到返回 JSON 对象的 RESTful 服务。

这是我的设计(default.html)

<body>
    <button id="btnExample">REST Service</button>

    <div id="divDisplayItems" data-win-control="WinJS.Binding.Template">
        <div>

            <table border="1">
                <tr>
                    <td><b>PersonId</b></td>
                    <td><b>PersonName</b></td>
                </tr>
                <tr>
                    <td><h4 data-win-bind="innerText: PersonId"></h4></td>
                    <td><h4 data-win-bind="innerText: PersonName"></h4></td>
                </tr>
            </table>
        </div>
    </div>
    <div
        id="basicListView"
        style="width:250px;height:500px"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{itemDataSource :SourceData.itemList.dataSource, itemTemplate: select('#divDisplayItems'),layout : {type: WinJS.UI.ListLayout}}"
        >
    </div>
</body>

这是我的 default.js 代码

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
            document.getElementById("btnExample").addEventListener("click", JSonRecord, false);
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    function JSonRecord(event) {

        WinJS
            .xhr(
                    { url: "URL/EmployeeList" }
                 )
            .then
                 (
                    function (response) {

                        var sourceData = JSON.parse(response.responseText);

                        var datalist = new WinJS.Binding.List(sourceData.EmployeeDetailsResult);

                        var dataMembers = { itemList: datalist };

                        WinJS.Namespace.define("SourceData", dataMembers);

                    }, function (error)
                    {
                        console.log(error);
                    }
                 );
    }
    app.start();
})();

意图是只要“btnExample”是cliekd，就应该填充ListView。该服务运行良好，我能够获得正确的数据。但在我努力的那一刻
加载页面，它崩溃了。

如果我评论

"data-win-options="{itemDataSource :SourceData.itemList.dataSource, itemTemplate: select('#divDisplayItems'),layout : {type: WinJS.UI.ListLayout}}"

至少页面正在加载。

有什么问题，如何将数据绑定(bind)到 ListView 控件？

谢谢

最佳答案

Default.js 中的 2 处更改

第一次更改

var app = WinJS.Application;

/* 插入一行

WinJS.Namespace.define("SourceData",
    {
        itemList: new WinJS.Binding.List([])
    })

*/

var 激活 = Windows.ApplicationModel.Activation;

第二次更改

function (response)
{

  var sourceData = JSON.parse(response.responseText);
  var datalist = new WinJS.Binding.List(sourceData.EmployeeDetailsResult);

 <-- basicListView is the Name of the div where you are binding the datasource -->
  basicListView.winControl.itemDataSource = datalist.dataSource;

}

观看 this 视频以获得更好的理解。

希望这可以帮助

关于javascript - 无法将 Rest JSON 数据绑定(bind)到 WinJS 中的 ListView 控件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14029772/

listview

javascript - 无法将 Rest JSON 数据绑定(bind)到 WinJS 中的 ListView 控件