Polymer iron-scroll-threshold with iron-ajax -

is there instruction/example on how iron-scroll-threshold iron-ajax.

basically, iron-scroll-threshold load more content using iron-ajax overtime scrolling reaches threshold.

however, examples can find resort using javascript load more content via ajax. if there way using iron-ajax can keep code lot cleaner.

check out jsbin complete example.

in short, need handle iron-scroll-treshold's on-lower-threshold or on-upper-threshold event, call iron-ajax's generaterequest() method. need handle new items in iron-ajax's on-response event.

code:

<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

the example based on 1 of previous answer on question related iron-list , iron-scroll-threshold.