Как привязать WinJS ListView к веб-службе?

Я хочу подключиться к веб-службе и отобразить результаты в WinJS ListView. Веб-сервис возвращает 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 для получения данных JSON из веб-службы.
  • Создайте массив элементов данных из возвращенного JSON
  • Используйте WinJS.Binding.List для создания списка из массива

Что мне не хватает? Куда мне позвонить WinJS.Binding.processAll(my_listview, data_list)?


javascript winjs windows-8
person royco    schedule 28.08.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вам не нужно звонить WinJS.Binding.processAll(my_listview, data_list).

Я предполагаю, что вы используете одностраничную модель навигации, поэтому в обработчике события готовности страницы вы должны сделать следующее:

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 сделать всю работу за вас.

Вы можете найти простой пример этого по адресу http://slickthought.net/post/2012/08/20/Windows-8-and-HTML-Part-6-Displaying-Data-with-WinJS-ListView.aspx . Вы также можете ознакомиться с кратким руководством по ListView здесь http://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx

Если вы не используете одностраничную модель, то внутри активированного обработчика на default.js вы просто добавите приведенный выше код для выполнения после внутри обещания, возвращаемого WinJS.UI.processAll()

person Jeff Brand    schedule 28.08.2012