聚合物高级数据绑定答案

【问题标题】：Polymer Advanced DataBinding聚合物高级数据绑定
【发布时间】：2015-02-19 13:41:11
【问题描述】：

我计划在我的应用程序中显示三列，每列大约有 1k 个自定义项（图片、标题、文本）。它可能会与类似的东西一起使用

<template>
  <template bind="{{myData as m}}">
    <template repeat if="{{m.1}}">
      <custom-item icon="{{m.icon}}" label="{{m.title}}"></custom-item>
    </template>
    <template repeat if="{{m.2}}">
      <custom-item icon="{{m.icon}}" label="{{m.title}}"></custom-item>
    </template>
...
  </template>
</template>

但我想避免将 3k 项从数据库加载到客户端，它们可能会保持在前 200 名之内。有没有办法在聚合物中进行某种动态加载？

【问题讨论】：

标签： polymer javascript-databinding

【解决方案1】：

我会为此推荐 core-list。 https://www.polymer-project.org/docs/elements/core-elements.html#core-list我最近在专辑列表中使用了它。（大专辑封面和几个按钮和文本）它大大提高了仅使用重复模板的性能。要加载更多结果，您可以使用 onscroll 回调。

请记住，所有这些都是假设您正在使用自动绑定模板。

<template id="app" is="auto-binding">
  // all html code in here
</template>

并等待模板被绑定

document.querySelector("#app").addEventListener('template-bound', function () {
  //all this js code will be in here
});

我的应用程序我使用 core-header-panel 来获取滚动事件，它与 core-scroll-header-panel 的工作方式相同。我给标题面板一个ID。我只是把它叫做headerPanel。

<core-header-panel id="headerPanel">

然后我将 core-list 的 scrollTarget 设置为使用 headerPanel 的滚动条。在js中做一个变量

this.scrollTarget = document.querySelector('#headerPanel').scroller;

然后我将它链接到核心列表

 <core-list data="{{data}}" scrollTarget="{{scrollTarget}}">
   <template>
     <custom-item icon="{{model.icon}}" label="{{model.title}}"></custom-item>
   </tempalte>
 </core-list>

已设置核心列表。至于不加载 3000 个结果，我会在一分钟前设置的滚动条上使用回调。然后计算已滚动页面的百分比，如果滚动超过 80%，则调用函数

 this.scrollTarget.onscroll = function () {
   var precent = (this.scrollTarget.scrollTop / (this.scrollTarget.scrollHeight - this.scrollTarget.offsetHeight)) * 100;
   if (precent > 80) {
     // call some function to .push() more to this.data
   }
 };

编辑：添加了一些关于等待模板被绑定的信息。

希望这会有所帮助。

【讨论】：

只是想我会补充一点，滚动功能可能不适用于所有浏览器。我在一个 chrome 打包的应用程序中使用了它，所以它没有在任何其他浏览器中测试过。

【解决方案2】：

还有一个用于无限滚动的聚合物元素： core-scroll-thresold，可以和core-list结合起来

【讨论】：