Iron-Ajaxでのポリマーのスクロール・スレッショルド

Question

iron-ajaxでのiron-scroll-thresholdの方法/例がありますか？

基本的には、iron-ajaxオーバータイムスクロールがしきい値に達すると、コンテンツを読み込むためにiron-scroll-thresholdを使用します。

しかし、すべての例では、JavaScriptを使用してAJAX経由でさらに多くのコンテンツを読み込むことができます。アイアン・アヤックスを使ってすべてを行う方法があれば、コードをもっときれいに保つことができます。

Answer 1

完全な例については、JSBinを参照してください。要するに

、あなたはS generateRequest()方法iron-scroll-treshold「あなたはiron-ajax呼び出すのon-lower-thresholdかon-upper-thresholdイベントを、」処理する必要があります。また、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> 

NOTE

iron-listとiron-scroll-thresholdに関連した質問にanswer私の前の1に基づく例。