聚合物鐵阿賈克斯不顯示數據

Question

當我使用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]]

我該如何解決？ 感謝幫助！

Answer 1

您並未將iron-ajax last-response屬性綁定到任何聚合物元素屬性，應該是： last-response = "{{ajaxResponse}}" 。

另外，需要通過https加載亞馬遜請求。 這是Plunkr看到的實際效果。

如果您想了解更多，可以在Iron-ajax上檢查此PolyCast 。

 <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>