Pagine di scorrimento polimero create per ripetizione

Question

Provo ad utilizzare le pagine di scorrimento ripetendo il modello.

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

nel polimero ho scritto

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

Mi dà l'errore

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 

non posso farlo funzionare.

Anche utilizzare

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

non funziona. in questo caso genera un'eccezione che la loro è di 0 pagine.

Penso che le pagine di scorrimento non ricevano l'input dopo la ripetizione del modello.

Se scrivo non per modello funziona bene ..

aggiornamento:

questo è tutto il polimero-elemento.

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

Se il loro è un altro elemento della pagina colpo di polimeri che possono cambiare in modo dinamico sarò felice di sapere.

Se la loro è una soluzione mod (come carico di tutto l'elemento dinamico) sarà anche ok

Grazie.

Answer 1

Una soluzione rapida consiste nel modificare il codice sorgente di swipe-pages.

In primo luogo, andare a trovare la funzione selectedChanged e aggiungere questo controllo al vertice -

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

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

Poi, a causa resetPositions e resetWidths sono chiamati troppo presto, si desidera sostituire il seguente

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

con

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

per assicurarsi che le pagine siano già visualizzate tramite dom-repeat.

Infine, assicurarsi di inizializzare la matrice all'interno di ready o attached.

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

Questo dovrebbe farlo!

Answer 2

Si prega di dare un'occhiata a questo: 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>