Polymer Iron-Ajax 不显示数据答案

【问题标题】：Polymer Iron-Ajax Does not Display DataPolymer Iron-Ajax 不显示数据
【发布时间】：2016-02-04 10:08:33
【问题描述】：

当我使用 Polymer 的 Iron-ajax 元素时，我遇到了一个问题。

我有一个这样的自定义元素：

   <link rel="import" href="../../bower_components/polymer/polymer.html">
   <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="first-element">
  <template>
    <!-- Stylesheet-->
    <style>
      ::host{
        display:block;
      }
    </style>
    <!-- Element content -->
    <h1>
      {{yolo}}
    </h1>
    <iron-ajax
       auto
       url="http://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json"
       handle-as="json"
       on-response="handleResponse"
       last-response="ajaxResponse"></iron-ajax>

      <span>{{ajaxResponse.city_name}}</span>
  </template>
  <script>
    Polymer({
      is: "first-element",
      properties: {
        yolo: {
          type: String,
          value: 'YOLOOO'
        }
      },
      handleResponse: function(){
        console.log('Jobs Done')
      }
    });
  </script>
</dom-module>

handleResponse 函数，也显示浏览器的开发者控制台，以便请求正常工作。数据绑定也正常工作，我还可以看到我的“yolo”属性值。

但是，它不显示数据，我也使用括号，例如 [[ajaxResponse.city_name]]

我该如何解决？感谢帮助！

【问题讨论】：

标签： ajax data-binding polymer

【解决方案1】：

您没有将 iron-ajax last-response 属性绑定到您的任何聚合物元素属性，它应该是：last-response = "{{ajaxResponse}}"。

此外，亚马逊请求需要通过https 加载。这是Plunkr，可以看到它的实际应用。

如果您想了解更多信息，可以查看此PolyCast on iron-ajax。

<dom-module id="first-element">
    <template>
      <!-- Stylesheet-->
      <style>
        ::host {
          display: block;
        }
        .icon{
          width:35px;
          height:auto;
          float:right;
          position:relative;
          top:-20px;
      }
      </style>
      <!-- Element content -->
      
      <h1>
      {{yolo}}
    </h1>

      <iron-ajax auto url="https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json" handle-as="json" on-response="handleResponse" last-response="{{ajaxResponse}}"></iron-ajax>
      <h1>{{ajaxResponse.city_name}}</h1>
      <template is="dom-repeat" items="{{ajaxResponse.days}}" index-as="day_no">
        <div>
          <hr>
          
          <span>Day : {{day_no}}</span>
          <br>
         <img src="{{item.icon}}" alt="" class="icon">
           <span> High: {{item.high}} C</span>
           <br>
           <span> Low: {{item.low}} C</span>
        </div>
       
      </template>

    </template>
    <script>
      Polymer({
        is: "first-element",
        properties: {
          yolo: {
            type: String,
            value: 'YOLOOO'
          },
          ajaxResponse: {
            type: Array
          }
        },
        handleResponse: function(e) {
          console.log(e.detail.xhr.response);
        }
      });
    </script>
  </dom-module>

【讨论】：