Strony z przesunięciem polimerowym tworzy się powtarzając

Question

Próbuję użyć stron z przesunięciem przez powtarzanie szablonu.

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

w polimerze pisałem

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

To daje mi błąd

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 

nie mogę go uruchomić.

Również użyć

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

nie działa. w tym przypadku zgłasza wyjątek, że jest to 0 stron.

Sądzę, że strony przewijania nie otrzymują danych wejściowych po powtórnym uruchomieniu szablonu.

Jeśli piszę to nie przez szablon działa ok ..

zmiana:

to wszystko polimer-elementowa.

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

Jeśli jest to kolejny element strony przesuwania dla polimeru, który może się dynamicznie zmieniać, chętnie się o tym dowiem.

jeśli ich to rozwiązanie Hack (jak obciążeniu cały element dynamicznie) będzie również ok

Dzięki.

Answer 1

Szybka naprawa polega na zmodyfikowaniu kodu źródłowego swipe-pages.

Najpierw znajdź funkcję selectedChanged i dodać ten czek na samej górze -

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

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

Następnie, ponieważ resetPositions i resetWidths nazywane są zbyt wcześnie, chcesz wymienić następujące

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

z

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

, aby upewnić się, że strony są już renderowane za pomocą dom-repeat.

Na koniec, upewnij się, że zainicjowałeś tablicę wewnątrz: ready lub attached.

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

To powinno wystarczyć!

Answer 2

Proszę spojrzeć na to: 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>