Polymer page templates are created by repetition.

Question

I am trying to use swipe-pages with repeat template.

<swipe-pages> <template is="dom-repeat" items="{{values}}"> <swipe-page> <div> Text to swipe </div> </swipe-page> </template> </swipe-pages> 

In polymer, I wrote

 created: function() { console.log(this); this.values = [1,2,3]; } 

It gives me an error

 Uncaught TypeError: Cannot set property 'values' of undefined Polymer.created Polymer.Base._addFeature._invokeBehavior Polymer.Base._addFeature._doBehavior Polymer.Base.createdCallback window.Polymer (anonymous function) Polymer.DomApi.DomApi._addNode 

I can not make it work.

Also use

 ready:function(){this.values=[1,2,3];}; 

does not work. in this case, it throws an exception that is 0 pages.

I think scroll pages do not receive input after re-launching the template.

If I do not write it according to the template, it works fine.

update:

it is all a polymer element.

 <dom-module id="element-element"> <template> <swipe-pages> <template is="dom-repeat" items="{{values}}"> <swipe-page> <div> text </div> </swipe-page> </template> </swipe-pages> </template> <script> Polymer({ is:'element-element', created: function() { this.values = [1,2,3]; }, ready: function(){ this.values=[1,2,3]; } }); </script> </dom-module> 

If this is another element of the polishing page that can change dynamically, I will be happy to know.

If this is a hacking solution (for example, load the whole element dynamically), it will also be OK

Thanks.

Answer 1

A quick fix is ​​to change the source code of swipe-pages .

First find the selectedChanged function and add this check to the very top -

 selectedChanged: function (newValue, oldValue) { if (oldValue === undefined) { return; } if (newValue >= this.pageCount || newValue < 0) { .... 

Then, since resetPositions and resetWidths are called too early, you want to replace the following

 ready: function () { this.resetPositions(); this.resetWidths(); } 

from

 attached: function () { this.async(function () { this.resetPositions(); this.resetWidths(); }, 5); 

so that pages are already displayed using dom-repeat .

Finally, make sure you initialize the array inside ready or attached .

 ready: function() { console.log(this); this.values = [1,2,3]; } 

That should do it!

Answer 2

Please take a look at this: argon-swipeable-pages !

 <argon-swipeable-pages items="[[ data ]]" as="person" index-as="pix"> <template> <p>Name: [[ person.name ]]</p> <p>Age: [[ person.age ]]</p> <p>Index: [[ pix ]]</p> </template> </argon-swipeable-pages>