Load more content on button click in Polymer

Question

In Polymer, I'm trying to lazy load the content in the DOM. There is an example to do that on scroll using the iron-scroll-threshold . But how to achieve the same on button click??

 <head> <base href="https://polygit.org/polymer+1.5.0/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="iron-list/iron-list.html"> <link rel="import" href="iron-scroll-threshold/iron-scroll-threshold.html"> <link rel="import" href="paper-progress/paper-progress.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <style> iron-list { height: 400px; } </style> <iron-scroll-threshold id="threshold" lower-threshold="50" on-lower-threshold="_loadMoreData" lower-triggered="{{nearBottom}}"> <iron-list scroll-target="threshold" items="[[items]]"> <template> <div>[[index]]: [[item]]</div> </template> </iron-list> </iron-scroll-threshold> <button on-tap="handleTap">Load More</button> <template is="dom-if" if="[[nearBottom]]"> <paper-progress indeterminate></paper-progress> </template> </template> <script> HTMLImports.whenReady(function() { Polymer({ is: 'x-foo', properties: { items: { type: Array, value: function() { return []; } } }, handleTap: function() { _loadMoreData(); }, _loadMoreData: function() { console.log('loading 100 more...'); // simulate network delay this.async(function() { for (let i = 0; i < 50; i++) { this.push('items', Math.random()); } this.$.threshold.clearTriggers(); }, 500); } }); }); </script> </dom-module> </body>

Here's the code that I'm trying out

Answer 1

You are missing the this :

handleTap: function() {
    this._loadMoreData();
}

Load more content on button click in Polymer

Question

1 answers

solution1
0 2016-09-12 02:05:08

Load more content on button click in Polymer

Question

1 answers

solution1 0 2016-09-12 02:05:08

solution1
0 2016-09-12 02:05:08