聚合物铁滚动门槛与铁阿贾克斯

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的一个例子。