2014-09-01 39 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;