Бесконечная прокрутка для Polymer 1.0 (без добавления)

Пробовал смешивать некоторые jQuery, но все основано на добавлении, что я не хочу использовать, потому что я пытаюсь полностью основывать свой дизайн на связывании и штамповке шаблонов и элементов. Я пытался использовать scrollTop различными способами, но в конечном итоге всегда зависел от того, что добавлено в локальный DOM. Если я не ошибаюсь, dom-repeat не имеет ничего общего с добавлением, а с созданием одного и того же штампа и привязкой его несколько раз (поправьте меня, если я ошибаюсь, недавно я начал изучать Polymer 1).

Я нашел только один хороший пример использования бесконечной прокрутки по повторяющемуся шаблону https://github.com/chadliu23/event-infinite-scroll но, к сожалению, это не то, что я ищу, так как я смешиваю данные синтаксического анализа iron-ajax в своем шаблоне. Имитация примера chadliu23 привела меня к глупому промежуточному шагу создания дополнительного массива и переноса в него данных из ajax, но я совершенно не хочу этого делать, потому что это мешает моей повторяемой перештамповке шаблона. Также понял, что есть способы создавать бесконечные эффекты прокрутки с помощью css, но не могу найти другого способа реализовать это, кроме как в наборах изображений.

Между тем, к сожалению, кажется, что список железа еще далеко не готов, и я не могу найти способ использовать концептуальную идею списка ядра в полимере 1.0.

Итак..... Любые предложения на столе?


scroll polymer infinite
person CookieMonster    schedule 01.07.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я думаю, вам нужен компонент item-page:

<dom-module id="item-page">
  <template>
    <iron-ajax id="ajax"
      params="{{_composeParamsForPage(page)}}"
      last-response="{{pageData}}">
    </iron-ajax>
    <template is="dom-repeat" items="{{pageData}}" as="item">
      <!-- Compose your list of items for this page here -->
    </template>
  </template>

  <script>
    (function(){
      "use strict";

      Polymer({
        is: 'item-page',
        properties: {
          page: {
            type: Number,
            observer: '_updatePage(page)'
          }
        },
        _updatePage: function(page) {
          this.$.ajax.generateRequest();
        }
      });
    })();
  </script>
</dom-module>

Затем, чтобы создать список с бесконечной прокруткой:

<template is="dom-repeat" items="{{pages}}" as="page">
  <item-page page="{{page}}"></item-page>
</template>

Важно, чтобы в вашем компоненте item-page для iron-ajax не было задано значение auto, потому что изначально для свойства page будет установлено значение undefined. Вместо этого вы должны следить за page и действовать соответствующим образом только после того, как он будет обновлен до чего-то другого, кроме undefined.

person Zikes    schedule 01.07.2015
comment
Итак, если я правильно понял, идея основана на переключении режима загрузки в зависимости от положения scrollTop (это будет интересно)? Кроме того, - мой мозг превратился в тушеное мясо в течение нескольких часов, поэтому вот сумасшедший вопрос: что за свойство страницы - какая-нибудь дополнительная информация о нем? - person CookieMonster; 01.07.2015
comment
loading позаботится о себе, все, что вам нужно будет сделать, это массив pages, который будет содержать номера страниц для загрузки. Когда вы будете готовы загрузить следующую страницу, просто используйте this.push('pages', <pagenum>), чтобы добавить новый номер страницы в конец массива. Polymer наблюдает за массивом pages и автоматически отметит содержимое dom-repeat для этой страницы, которое будет включать новый iron-ajax. - person Zikes; 01.07.2015
comment
Поскольку pages является массивом, важно, чтобы вы использовали this.push Polymer для добавления к нему, иначе Polymer не узнает, что pages был обновлен. pages также может иметь любые номера страниц, которые вам нравятся, поэтому ваша бесконечная прокрутка может начинаться со страницы 1 или страницы 50. - person Zikes; 01.07.2015
comment
Звучит потрясающе, я свяжусь с вами, как только попробую. Большое спасибо за ваше время! - person CookieMonster; 01.07.2015
comment
При просмотре я думаю, что могу ошибаться в одном: pageData будет сохранять одну и ту же область на каждой итерации через цикл pages, что означает, что каждый раз, когда загружается новая страница, он будет возвращаться и переустанавливать все старые страницы с новыми данными! Я не уверен, как изменить область действия связанной переменной, но сейчас я изучаю это. - person Zikes; 01.07.2015
comment
После того, как я немного ударился об него головой, я думаю, что единственным жизнеспособным решением было бы создание второго компонента, но хорошая новость заключается в том, что его можно будет повторно использовать в самых разных ситуациях. Я обновлю свой ответ макетом. - person Zikes; 01.07.2015
comment
Я вижу, так динамически обрабатываются запросы ajax, когда активируется _updatePage. Это очень классная идея :D - person CookieMonster; 02.07.2015