2014-09-01 47 views
0

我正在使用WinJS練習Windows Phone開發,並且我有以下代碼解析從特定URL接收的JSON。並使用圖像綁定到一個HTML頁面的列表視圖,無法將圖像綁定到img標記

JavaScript代碼:

WinJS.xhr({ url: urlToBeUsed }).then(
    function (sportsResponse) { 
     var sportsJSON = JSON.parse(sportsResponse.responseText); 
     var listItems = sportsJSON.Videos.Data; 

     for (var i = 0; i < listItems.length; i++) { 
      var imageList = listItems[i].Items; 
      var count = imageList.length; 
      if (count > 0) { 

       listItems[i].Items[0].Images.forEach(imageIteration); 

       function imageIteration(value, index, array) { 
        var picture = value.Url; 
        var name = value.title; 

        sportsImageList.push({ 
         title: name, 
         picture: picture 
        }); 
       } 
      } 
     } 
     imageList.itemDataSource = sportsImageList.dataSource; 
    }) 
} 

HTML代碼:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title></title> 

    <!-- WinJS references --> 
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script> 
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script> 
    <script src="/js/navigator.js"></script> 
    <link href="/css/default.css" rel="stylesheet" /> 
    <link href="/pages/home/home.css" rel="stylesheet" /> 
    <script src="/pages/sports/sports.js"></script> 
    </head> 
    <body> 
    <!-- The content that will be loaded and displayed. --> 
    <div class="fragment homepage" style="width:100%;height:100%;padding:10px"> 
     <div class="myTemplate" data-win-control="WinJS.Binding.Template"> 
     <div class="myItem"> 
      <img data-win-bind="src:picture" style="width:100px;height:100px" /> 
     </div> 
     </div> 
     <div id="imageList" data-win-control="WinJS.UI.ListView" data-win-bind="winControl.itemDataSource:sportsImageList.dataSource" data-win-options="{itemTemplate:select('.myTemplate')}"></div> 
    </div> 
    </body> 
</html> 

我試圖綁定URL到很多方面該圖像,但在屏幕上,我只能看到鏈接,而不是實際的圖像。 我錯在哪裏? 所有幫助和建議表示讚賞。 謝謝!

回答

0

我相信您的錯誤出現在您的任務欄中,請記住itemDataSourceListView控件的屬性。因爲它是在你的代碼中,你將該屬性分配給imageList元素。

它改成這樣:

imageList.winControl.itemDataSource = sportsImageList.dataSource;