如何將WinJS ListView綁定到Web服務？

Question

我想連接到Web服務並在WinJS ListView中顯示結果。 Web服務返回JSON。 到目前為止，我有這個標記：

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
            <div>
                <h4 data-win-bind="innerText: title"></h4>
            </div>
    </div>

    <div id="basicListView" data-win-control="WinJS.UI.ListView"
        data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
        itemTemplate: select('#mediumListIconTextTemplate')}">
    </div>

這是我想在JS中要做的事情：

• 使用WinJS.xhr從Web服務獲取JSON數據。
• 根據返回的JSON創建數據元素數組
• 使用WinJS.Binding.List從數組創建一個List

我想念什么？ 在哪里調用WinJS.Binding.processAll(my_listview, data_list) ？

Answer 1

您不需要調用WinJS.Binding.processAll(my_listview, data_list).

我將假設您正在使用單頁導航模型，因此在頁面的ready事件處理程序中，您將執行以下操作：

var page = WinJS.UI.Pages.define("/pages/home.html", {
        ready: function (element, options) {

            WinJS.xhr({url:'http://someservice.com'}).then(
                function(response) { 
                    var json = JSON.parse(response.responseText);
                    var list = new WinJS.Binding.List(json.results); // or whatever array you are binding too 
                    DataExample.itemList = list; // or however you want to get the list into DataExample.itemList
                },
                function(error) {
                    //handle error 
                }
            );
        }

而已。 default.js將處理整個頁面的processAll（），只需讓WinJS magic為您完成工作即可。

您可以在http://slickthought.net/post/2012/08/20/Windows-8-and-HTML-Part-6-Displaying-Data-with-WinJS-ListView.aspx中找到一個簡單的示例。 您也可以在此處遵循ListView快速入門， 網址為http://msdn.microsoft.com/zh-cn/library/windows/apps/hh465496.aspx

如果您不使用單頁模型，則在default.js的激活處理程序內，您只需在WinJS.UI.processAll()返回的promise中添加以上代碼即可執行