2016-06-25 5 views
0

Ich bin auf einem Polymer App arbeiten, und ich versuche, mein Skript zu schreiben declaratively..but läuft in Uncaught ReferenceError: selectedTestimonial is not definedPolymer: „Zurück“ oder „Weiter“ Radfahren nicht durch die Seiten

Auch der Code ist so eingestellt, dass nur 3 Elemente im Array erlaubt sind, aber ich muss es so schreiben, dass es eine unendliche Anzahl von Elementen haben kann.

Der Code Problem ist hier:

<script> 

    Polymer({ 
     is: "page-testimonials", 

     properties: { 
      selectedTestimonial: { 
       type: Number, 
       value: 0 
      }, 
     }, 

     _PrevClick: function() { 
      selectedTestimonial = selectedTestimonial === 0 ? 2 : (selectedTestimonial - 1); 
     }, 

     _NextClick: function() { 
      selectedTestimonial = selectedTestimonial === 2 ? 0 : (selectedTestimonial + 1); 
     } 


    }); 

</script> 

hier den gesamten Code als Referenz ist:

<!-- 
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
     TESTIMONIALS (page) 
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: --> 
    <link rel="import" href="../../bower_components/polymer/polymer.html"> 
    <link rel="import" href="../components/component-page.html"> 


    <dom-module id="page-testimonials"> 
    <template> 

     <style> 
     :host { 
      display: block; 
      width: 100%; 
      height: 100%; 
      box-sizing: border-box; 
     } 

     component-page { } 

     iron-swipeable-pages { z-index: 1; } 
     iron-swipeable-pages > * { 
      padding: 2rem; 
      -webkit-user-select: none; /* Chrome all/Safari all */ 
      -moz-user-select: none;  /* Firefox all */ 
      -ms-user-select: none;  /* IE 10+ */ 
      user-select: none;   /* Likely future */ 
      cursor: default; 
     } 
     .page { height: 100%; } 

     img { 
      border-radius: 100%; 
      -webkit-backface-visibility: hidden; 
      outline: transparent solid 1px; 
      border: 12px solid rgba(0, 0, 0, .25); 
     } 

     h3 { color: rgba(246, 255, 140, 1); font-size: 2rem; font-weight: 300; text-transform: uppercase; padding: 1rem 0 0; } 
     h4 { color: rgba(246, 255, 140, .5); font-size: 15px; font-weight: 300; text-transform: uppercase; opacity: .48; position: relative; } 
     h4::after { content: ""; display: block; width: 200%; height: 3px; background: rgba(0, 0, 0, .25); position: absolute; top: calc(100% + 10px); left: -50%; } 
     p { color: #fff; position: relative; z-index: 1; font-size: 1rem; font-weight: 100; margin: 1rem 78px; padding: 1rem 0; } 

     .next-click, 
     .prev-click { 
      color: rgba(255, 255, 255, .25); 
      position: absolute; 
      top: calc(50% - 40px); 
      z-index: 10; 
     } 

     .prev-click { left: 0; } 
     .next-click { right: 0; } 



    @media (min-width: 769px) { 
     img { border: 22px solid rgba(0, 0, 0, .25) } 
     h4::after { height: 2px; } 
     p { } 
     .next-click, 
     .prev-click { 
      color: rgba(255, 255, 255, .25); 
      position: absolute; 
      top: calc(50% - 70px); 
      z-index: 10; 
     } 
     .prev-click { left: 50px; } 
     .next-click { right: 50px; } 
    } 

     </style> 


     <!-- Content 
     ----------------------------------------------------------------------------------------------------------------> 
      <component-page grid="vertical" layout="start-center" min-height="1"> 

       <!-- Arrows --> 
       <paper-icon-button class="prev-click" mobile-size="72" tablet-size="112" desktop-size="150" icon="hardware:keyboard-arrow-left" on-click="_PrevClick"></paper-icon-button> 
       <paper-icon-button class="next-click" mobile-size="72" tablet-size="112" desktop-size="150" icon="hardware:keyboard-arrow-right" on-click="_NextClick"></paper-icon-button> 


       <!-- Testimonial --> 
       <iron-swipeable-pages on-selected-changed="_onSelectedChanged" selected="{{selectedTestimonial}}" flex="1" width="100" show-arrow> 
        <div class="page" grid="vertical" layout="center-center"> 
         <img src="https://randomuser.me/api/portraits/men/7.jpg" size="300" mobile-size="150"> 
         <h3>Justin O'Neill</h3> 
         <h4>Beaumont, Texas</h4> 
         <p mobile-width=".8" tablet-width=".75" desktop-width=".5" desktop-max-width="600px">This company is top notch, on task, and gets the job done! Clearly outstanding, honest, and reliable in work and service--AND a reasonable price! The estimate bid was on the money exactly.</p> 
        </div> 

        <div class="page" grid="vertical" layout="center-center"> 
         <img src="https://randomuser.me/api/portraits/men/17.jpg" size="300" mobile-size="150"> 
         <h3>Justin O'Neill</h3> 
         <h4>Beaumont, Texas</h4> 
         <p mobile-width=".8" tablet-width=".75" desktop-width=".5" desktop-max-width="600px">This company is top notch, on task, and gets the job done! Clearly outstanding, honest, and reliable in work and service--AND a reasonable price! The estimate bid was on the money exactly.</p> 
        </div> 

        <div class="page" grid="vertical" layout="center-center"> 
         <img src="https://randomuser.me/api/portraits/men/27.jpg" size="300" mobile-size="150"> 
         <h3>Justin O'Neill</h3> 
         <h4>Beaumont, Texas</h4> 
         <p mobile-width=".8" tablet-width=".75" desktop-width=".5" desktop-max-width="600px">This company is top notch, on task, and gets the job done! Clearly outstanding, honest, and reliable in work and service--AND a reasonable price! The estimate bid was on the money exactly.</p> 
        </div> 
       </iron-swipeable-pages> 


       <fx-skew bg="white"></fx-skew> 
      </component-page> 
     <!-- Content 
     ----------------------------------------------------------------------------------------------------------------> 


    </template> 



    <script> 

     Polymer({ 
      is: "page-testimonials", 

      properties: { 
       selectedTestimonial: { 
        type: Number, 
        value: 0 
       }, 
      }, 

      _PrevClick: function() { 
       selectedTestimonial = selectedTestimonial === 0 ? 2 : (selectedTestimonial - 1); 
      }, 

      _NextClick: function() { 
       selectedTestimonial = selectedTestimonial === 2 ? 0 : (selectedTestimonial + 1); 
      } 


     }); 

    </script> 

    </dom-module> 

Antwort

1

Sie müssen Objekte mit this.PROPERTYNAME (das heißt, this.selectedTestimonial) verweisen. Wenn Sie den hartcodierten Max-Index vermeiden möchten, können Sie ihn berechnen, indem Sie <iron-swipeable-pages> für alle page Divs abfragen und die Länge des Ergebnisses verwenden.

Polymer({ 
    is: "page-testimonials", 

    properties: { 
    selectedTestimonial: { 
     type: Number, 
     value: 0 
    }, 
    }, 

    _PrevClick: function() { 
    // assume <iron-swipeable-pages id="swipe"> 
    var pages = this.$.swipe.querySelectorAll('.page'); 
    var max = (pages && pages.length - 1) || 0; 
    this.selectedTestimonial = this.selectedTestimonial === 0 ? max : (this.selectedTestimonial - 1); 
    }, 

    _NextClick: function() { 
    // assume <iron-swipeable-pages id="swipe"> 
    var pages = this.$.swipe.querySelectorAll('.page'); 
    var max = (pages && pages.length - 1) || 0; 
    this.selectedTestimonial = this.selectedTestimonial === max ? 0 : (this.selectedTestimonial + 1); 
    } 
}); 
Verwandte Themen