Question

我正在使用WinJS练习Windows Phone开发，我有以下代码解析从特定URL收到的JSON。并使用图像绑定到HTML页面中的列表视图，

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绑定到图像，但在屏幕上我只能看到链接而不是实际图像。我哪里错了？所有帮助和建议表示赞赏。谢谢！

Answer 1

我相信您的错误在您的分配行中，请记住itemDataSource是ListView控件的属性。就像在您的代码中一样，您将该属性分配给imageList元素。

将其更改为：

imageList.winControl.itemDataSource = sportsImageList.dataSource;

无法将图像绑定到img标记

1 个答案: