CODEWITHSUNDEEP
polymerjavascript-databinding
Adam Sobotka
Adam Sobotka

Reputation: 97

Polymer Advanced DataBinding

I plan to display three columns in my application, each with roughly 1k of custom items (picture, header, text). It will probably work with something like

<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>

but I want to avoid loading 3k items from database to client, they will probably stay within top 200. Is there a way to do some sort of dynamic loading in polymer?

Upvotes: 0

Views: 148

Answers (2)

BLASTOR
BLASTOR

Reputation: 316

There is also a polymer element for infinite scrolling : core-scroll-thresold, you can combine it with the core-list

Upvotes: 2

jimi dough10
jimi dough10

Reputation: 2016

i would recommend core-list for this. https://www.polymer-project.org/docs/elements/core-elements.html#core-list i recently used it in a album list. (large album covers and several buttons and text) it greatly improved performance from using only a repeating template. to load more results you could use a onscroll callback.

keep in mind all this is assuming you are working in a auto-binding template.

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

and waited for the template to be bound

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

im my app i used core-header-panel to get scroll event it would work the same with core-scroll-header-panel. i gave the header panel a id. i just called it headerPanel. 

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

then i set the scrollTarget for core-list to use the scroller of the headerPanel. make a variable in js

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

then i link that to the core-list

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

that has core-list set up. as for not loading 3000 results i would use a callback on the scroller we set up a min ago. then calculate a % of the page that has been scrolled and call a function if scrolled more then say 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
   }
 };

edit: added bit about waiting for template to be bound.

hope this helps.

Upvotes: 2

Related Questions