WinJS ListView中的特殊JSON綁定

我在將此JSON綁定到我的列表視圖時遇到問題。 http://pubapi.cryptsy.com/api.php?method=marketdatav2 WinJS ListView中的特殊JSON綁定

沒有數據顯示。

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」：{...} ...}

來源

2014-01-16 Martin

有三樣東西在你的代碼怎麼回事。

首先，ListView必須綁定到WinJS.Binding.List的dataSource屬性，而不是直接綁定到List。因此，在您的HTML中，您可以使用itemDataSource：DataExample.itemList.dataSource，或者您可以使DataExample.itemList取消引用該級別的數據源。

其次，您還遇到了data-win-options中itemDataSource的聲明式綁定發生在DataExample.itemList甚至被填充之前的問題。在ListView被實例化的時候，_list和itemList將是未定義的。這會導致嘗試解除引用.dataSource時出現問題。

解決方法是確保DataExample.itemList在啓動時至少用一個空的WinJS.Binding.List實例進行初始化。所以把這個和第一位在一起，我們有這樣的：

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

var publicMembers = 
    { 
     itemList: _list.dataSource 
    };

有了這個，你可以在以後用不同的List實例代替_list，和ListView控件會自動刷新。

這給我們帶來了第三個問題，使用HTTP響應數據填充List。 WinJS.Binding.List在其構造函數中使用數組，而不是一個對象。你直接從HTTP請求傳遞解析的JSON對象，這是行不通的。

現在，如果你像以前一樣在_list有WinJS.Binding.List實例已經，那麼你可以走對象，並直接將項目添加到列表如下：

var jm = json.return.markets; 

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

或者，您可以填寫一個單獨的數組，然後從中創建一個新的List。在這種情況下，然而，你需要的是新的List.dataSource分配到ListView代碼：

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。

來源

2014-01-17 17:22:51

嗨Kraig，非常感謝。這像一個魅力。我一定會閱讀你的電子書，以獲得更多有關該主題的經驗。 – Martin

WinJS ListView中的特殊JSON綁定

回答

相關問題