Polymer swipe-pages create by repeat

Question

I try to use swipe-pages by template repeat.

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

In the polymer I wrote

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

It give me the 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 cant get it work.

Also use

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

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

I think that the the swipe-pages does not receive the input after the template repeat run.

If I write it not by template it works ok..

update:

this is all the 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 their is another swipe page element for polymer that can dynamically change I will be happy to know.

If their is a hack solution (like load all the element dynamically) it will be also ok

Thanks.

Fieldfare

Try use the ready callback instead (ready: function() {}) – Saponify

I tried it.. then swipe-pages throws exception that it has 0 pages – Fieldfare

In which element are you trying to set this.values? Can you share more code please? – Saponify

@Saponify I updated the code. this is all the element. – Fieldfare

@Saponify I will be happy to know if you know some polymer 1.0 element for swiping...that works with template repeat. this will help me. Thanks. – Fieldfare

What swipe-pages are you using? Is it Polymer 1.0 compatible? – Andrey

@JustinXL github.com/slogger/swipe-pages – Fieldfare

This line in swipe-pages is blocking you - <content id="pages" select="swipe-page"></content>...It can't select swipe-page because when it tries to getDistributedNodes() it returns an empty array, that is, zero pages. So the fix will require either a pull request to swipe-pages or use an alternative. – Saponify

Their is an alternative (I searched and didnt find)? that works with repeat? It is possible to bind the content? so it will render only after the template loop finish ? – Fieldfare

I think about ugly solution.. creating 20 pages and then change them.. Then I dont have to use the repeat. But this is very ugly.. Or somehow in get into the shadow dom and dont use getDistributedNodes() but another function.. – Fieldfare

Have you considered neon-animated-pages as an alternative solution? – Saponify

I saw this but it does not support swipe. (or I mistake) – Fieldfare

check this: github.com/MeTaNoV/iron-swipeable-pages – Faunus

Answer 1

A quick fix is to modify swipe-pages's source code.

First, go find the selectedChanged function and add this check at the very top -

selectedChanged: function (newValue, oldValue) {
    if (oldValue === undefined) {
        return;
    }

    if (newValue >= this.pageCount || newValue < 0) {
        ....

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

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

with

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

to make sure the pages are already rendered via dom-repeat.

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

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

That should do it!

Andrey

Answer 2

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

Endophyte