Polymer 聚合物高级数据绑定

我计划在我的应用程序中显示三列，每列大约有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名以内。有没有办法在聚合物中进行某种形式的动态加载？

我建议使用核心列表。我最近在专辑列表中使用了它。（大相册封面、多个按钮和文本）它大大改善了仅使用重复模板的性能。要加载更多结果，可以使用onscroll回调

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

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

im我的应用程序我使用核心标题面板获得滚动事件，它将与核心滚动标题面板工作相同。我给了头部面板一个id，我只是叫它headerPanel

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

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

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

编辑：增加了等待模板绑定的信息

---

希望这能有所帮助。

我会为此推荐核心列表。我最近在专辑列表中使用了它。（大相册封面、多个按钮和文本）它大大改善了仅使用重复模板的性能。要加载更多结果，可以使用onscroll回调

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

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

im我的应用程序我使用核心标题面板获得滚动事件，它将与核心滚动标题面板工作相同。我给了头部面板一个id，我只是叫它headerPanel

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

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

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

编辑：增加了等待模板绑定的信息

---

希望这能有所帮助。

还有一种用于无限滚动的聚合物元素：

---

，您可以将其与核心列表相结合

还有一个用于无限滚动的聚合元素：

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

---

，您可以将它与核心列表结合起来

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

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