Polymer iron-scroll-threshold with iron-ajax

Question

是否有关于如何使用 iron-ajax 实现 iron-scroll-threshold 的 instruction/example。

基本上，我希望 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 的一个问题。

Polymer iron-scroll-threshold with iron-ajax

Polymer iron-scroll-threshold with iron-ajax

ajax

polymer

polymer-starter-kit