Полимерная железная спираль-порог с железо-аяксом

Question

Есть ли инструкция / пример того, как сделать iron-scroll-threshold с iron-ajax.

По сути, мне бы хотелось, чтобы порог iron-scroll-threshold загружал больше контента с использованием порога сверхурочной прокрутки iron-ajax.

Тем не менее, все примеры, которые я могу найти, используют javascript для загрузки большего количества контента через AJAX. Если есть способ сделать все это, используя только iron-ajax, тогда я могу сделать код намного чище.

Answer 1

Проверьте этот JSBin для полного примера.

Короче говоря, вам нужно справиться с iron-scroll-treshold"s on-lower-threshold или же on-upper-threshold событие, где вы называете iron-ajax"s generateRequest() метод. Также вам нужно обработать новые предметы в iron-ajax"s 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,