WinJS ListView의 특수 JSON 바인딩

Question

이 JSON을 내 목록보기에 바인딩하는 데 문제가 있습니다. http://pubapi.cryptsy.com/api.php?method=marketdatav2

데이터가 표시되지 않습니다.

Data.js

(function() { 
    "use strict"; 

    var _list; 

    WinJS.xhr({ url: 'http://pubapi.cryptsy.com/api.php?method=marketdatav2' }).then(
     function (response) { 
      var json = JSON.parse(response.responseText); 
      _list = new WinJS.Binding.List(json.return.markets); 
     }, 
     function (error) { 
      //handle error 
     } 
    ); 

    var publicMembers = 
     { 
      itemList: _list 
     }; 

    WinJS.Namespace.define("DataExample", publicMembers); 
})(); 

HTML :

<section aria-label="Main content" role="main"> 
      <div id="listItemTemplate" data-win-control="WinJS.Binding.Template"> 
       <div class="listItem"> 
        <div class="listItemTemplate-Detail"> 
         <h4 data-win-bind="innerText: label"></h4> 
        </div> 
       </div> 
      </div> 
      <div id="listView" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource : DataExample.itemList, itemTemplate: select('#listItemTemplate'), layout: {type: WinJS.UI.GridLayout}}"></div> 
</section> 

나는 API가 잘 형성되지 않는다 생각합니다. 이 부분이 조금 이상하지 않습니까?

"시장": { "ADT/XPM": {...} ...}

Answer 1

는 여기에 코드에서 일어나는 세 가지가 있습니다.

먼저 ListView는 List가 아닌 WinJS.Binding.List의 dataSource 속성에 바인딩되어야합니다. 따라서 HTML에서 itemDataSource : DataExample.itemList.dataSource를 사용하거나 DataExample.itemList가 해당 수준의 dataSource를 참조하도록 만들 수 있습니다.

둘째, DataExample.itemList가 채워지기 전에 data-win-options에서 itemDataSource의 선언적 바인딩이 발생하고 있다는 문제가 있습니다. ListView가 인스턴스화되면, _list 따라서 itemList는 정의되지 않습니다. 이로 인해 .dataSource를 참조 해제하는 데 문제가 발생합니다.

이 방법은 DataExample.itemList가 시작시 WinJS.Binding.List의 빈 인스턴스로 초기화되도록하는 것입니다. 그래서 퍼팅 함께 첫 번째 비트, 우리는 이것을 가지고 :이

var _list = new WinJS.Binding.List(); 

var publicMembers = 
    { 
     itemList: _list.dataSource 
    }; 

을 나중에 다른 목록 인스턴스와 _list 대체 할 수 있으며, ListView에 자체를 새로 고쳐집니다.

세 번째 문제는 HTTP 응답 데이터로 List를 채우는 것입니다. WinJS.Binding.List는 배열을 생성자에서 가져 오며 개체가 아닙니다. 파싱 ​​된 JSON 객체를 HTTP 요청에서 곧바로 전달합니다. 작동하지 않습니다.

당신이 이전 _list에 이미 WinJS.Binding.List 인스턴스가있는 경우 지금, 당신은 단지 객체를 걸을 수 다음과 같이 목록에 직접 항목을 추가 :

var jm = json.return.markets; 

for (var i in jm) {     
    _list.push(jm[i]);  
} 

다른 방법을, 당신은 채울 수 별도의 배열을 만들고 나서 새 List를 만듭니다. 그러나이 경우, 당신은 코드에서 ListView에 해당 새로운 List.dataSource을 지정해야합니다 :

var jm = json.return.markets;    
var markets = []; 

for (var i in jm) {     
    markets.push(jm[i]); 
} 

_list = new WinJS.Binding.List(markets); 

var listview = document.getElementById("listView").winControl; 
listview.itemDataSource = _list.dataSource; 

두 가지 방법이 (내가 그들을 테스트) 작동합니다. 첫 번째 솔루션은 더 간단하고 짧지 만 다른 HTTP 요청을 만들어서 다시 작성하면 목록을 지워야합니다. 두 번째 솔루션을 사용하면 각 요청마다 새 List를 작성하여 ListView에 전달하므로 특정 요구 사항에 따라 더 잘 작동 할 수 있습니다.

두 번째 솔루션에서는 HTML에서 itemDataSource 옵션을 모두 제거 할 수 있으며 데이터 소스를 매번 코드에 할당하므로 DataExample 네임 스페이스와 해당 변수를 제거 할 수 있습니다.그런 다음 _list 전체를 HTTP 요청에 대해 로컬로 유지할 수도 있습니다.

희망이 있습니다. ListView의 복잡성에 대해 더 알고 싶다면 MSPress의 무료 전자 서적 제 7 장, Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition을 참조하십시오.