Question

我遇到了问题。我试图将ListView WinJS控件绑定到返回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}}"

至少页面正在加载。

问题是什么以及如何将数据绑定到ListView控件？

由于

Answer 1

您正在将 ListView 绑定到 SourceData 命名空间，该命名空间在您单击按钮之后才可用。因此，您尝试在运行时绑定到未定义的值。您应该在激活的事件之前在js文件的顶部设置 SourceData 命名空间，并使用空的绑定列表创建它。有点像...

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

在按钮单击手柄中，您只需将项目添加到现有列表或创建一个新项目并从头开始分配。

您可以在30 Days找到一些很棒的教程，特别是在第2周的IIRC中。

Answer 2

您崩溃了，因为当您加载页面并且ListView尝试绑定时，您的列表不存在。在您异步调用Web服务之后，它才会存在。你需要做的就是修复它早于声明你的WinJS.Binding.List（可能就在app别名旁边的app.onactivated行上方）。然后，当您获取数据时，只需迭代结果并将它们推送到已存在的List中。像这样......

sourceData.EmployeeDetailsResult.forEach(function(r) {
    yourList.push(r);
}

Answer 3

Default.js中的2个更改

首次更改

var app = WinJS.Application;

/ *插入行

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

* /

var activation = 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视频，以便更好地理解。

希望这有帮助

无法将Rest JSON数据绑定到WinJS中的ListView控件

3 个答案: