Polymer 1.0 的无限滚动（不附加）

Question

尝试混合一些 jQuery，但一切都基于附加，我不想使用的东西，因为我试图将我的设计完全基于绑定和标记模板和元素。我尝试以各种方式使用 scrollTop，但我总是依赖于本地 DOM 上附加的内容。如果我没记错的话，dom-repeat 与追加无关，而是与创建相同的标记并多次绑定它（如果我错了，请纠正我，我最近开始研究 Polymer 1）。

我只发现了在重复模板https://github.com/chadliu23/event-infinite-scroll 上使用无限滚动的一个很好的例子，但不幸的是，这不是我想要的，因为我正在将 Iron-ajax 解析数据混合到我的模板中。模拟 chadliu23 的示例使我进入了一个愚蠢的中间步骤，即创建一个额外的数组并将 ajax 中的数据推送到其中，但这完全是我不想做的事情，因为它会弄乱我的可重复模板重新标记。 还意识到有一些方法可以使用 css 创建无限滚动效果，但除了在图像集中之外无法找到任何其他方法来实现这一点。

同时，遗憾的是，iron-list 似乎还远未准备好，我找不到任何方法将 core-list 的概念理念应用到聚合物 1.0 中。

那么.....有什么建议吗？

Answer 1

我认为你需要一个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 以外的内容后采取相应措施。