如何将WinJS ListView绑定到Web服务？

Question

I want to connect to a web service and display results in a WinJS ListView. The web service returns JSON. So far I have this markup:

    <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>

Here's what I think I need to do in JS:

• Use WinJS.xhr to get JSON data from the web service.
• Create an array of data elements from the returned JSON
• Use WinJS.Binding.List to create a List from the array

What am I missing? Where do I call WinJS.Binding.processAll(my_listview, data_list) ?

Answer 1

You do not need to call WinJS.Binding.processAll(my_listview, data_list).

I will assume you are using the single-page nav model, so in the page's ready event handler, you would do the following:

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 
                }
            );
        }

That's it. default.js will handle the processAll() for the entire page, just let the WinJS magic do the work for you.

You can find a simple example of doing this at http://slickthought.net/post/2012/08/20/Windows-8-and-HTML-Part-6-Displaying-Data-with-WinJS-ListView.aspx . You can also follow the ListView QuickStart here http://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx

If you are not using the single page model, then inside the activated handler on default.js you will just add the code above to execute after inside the promise returned by WinJS.UI.processAll()