3

我面临一个问题。我正在尝试将 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 控件？

谢谢

4

3 回答 3

2

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

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

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

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

于 2012-12-25T16:01:34.343 回答
2

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

sourceData.EmployeeDetailsResult.forEach(function(r) {
    yourList.push(r);
}
于 2012-12-25T16:01:42.323 回答
1

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;                      

}

观看此视频以更好地理解。

希望这可以帮助

于 2012-12-26T02:43:50.743 回答