Polymer Advanced DataBinding

Question

Я планирую отображать три столбца в моем приложении, каждый из которых содержит примерно 1 тыс. Пользовательских элементов (изображение, заголовок, текст). Это вероятно, будет работать с чем-то вроде

<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. Есть ли способ, чтобы сделать какой-то динамической нагрузки в полимере?

Answer 1

Я бы рекомендовал основной список для этого. 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 
}); 

им мое приложение я использовал ядро-заголовка-панели, чтобы прокрутить события он будет работать так же с ядром улиткой-заголовка панели. я дал панели заголовка идентификатор. Я просто назвал его headerPanel.

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

тогда я установить 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 
    } 
}; 

редактирования: добавил немного об ожидании шаблона, чтобы быть связанным.

надеюсь, что это поможет.

Answer 2

Существует также полимерный элемент для бесконечной прокрутки: core-scroll-thresold, вы можете объединить его с ядром-лист