聚合物滑动页面通过重复创建

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.

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!

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>