聚合物鐵滾動門檻與鐵阿賈克斯

Question

是否有一個指示/例如鐵 - 阿賈克斯如何做鐵滾動門檻。

基本上我想用iron-scroll-threshold加載更多使用iron-ajax超時滾動的內容達到閾值。

但是，我可以找到所有的例子，通過使用javascript來通過AJAX加載更多內容。如果有一種方法可以完全使用iron-ajax，那麼我可以保持代碼更清潔。

Answer 1

查看完整示例中的JSBin。

總之，你需要處理iron-scroll-treshold的on-lower-threshold或on-upper-threshold活動期間，凡調用iron-ajax的generateRequest()方法。您還需要處理iron-ajax的on-response事件中的新項目。

代碼：

<dom-module id="test-app"> 
    <template> 

    <iron-ajax id="ajax" 
     url="https://randomuser.me/api/" 
     handle-as="json" 
     params='{"results": 20}' 
     on-response="categoriesLoaded"> 
    </iron-ajax> 

    <iron-scroll-threshold on-lower-threshold="loadMoreData" id="threshold"> 
     <iron-list id="list" items="[[categoriesJobs]]" as="person" scroll-target="threshold"> 
      <template> 
      <!-- item template --> 
      </template> 
     </iron-list> 
    </iron-scroll-threshold> 

    </template> 
    <script> 
    Polymer({ 

     is: 'test-app', 

     attached: function() { 
     this.categoriesJobs = []; 
     }, 

     loadMoreData: function() { 
     console.log('load more data'); 
     this.$.ajax.generateRequest(); 
     }, 

     categoriesLoaded: function (e) { 
     var self = this; 
     var people = e.detail.response.results; 
     people.forEach(function(element) { 
      self.push('categoriesJobs', element); 
     }); 
     this.$.threshold.clearTriggers(); 
     } 

    }); 
    </script> 
</dom-module> 

注意

基於我對有關iron-list和iron-scroll-threshold問題以前answer的一個例子。