聚合物：“上一页”或“下一页”按钮不循环浏览页面

Question

I'm working on a Polymer app, and I'm trying to write my script declaratively..but running into Uncaught ReferenceError: selectedTestimonial is not defined

Also, the code is set to only allow 3 items in the array (0,1,2) , but I need to write it so that it can have an infinite number of items.

The problem code is here:

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

Here's all of the code for reference:

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

Answer 1

You need to reference properties with this.PROPERTYNAME (ie, this.selectedTestimonial ). If you want to avoid the hard-coded max index, you could calculate it by querying <iron-swipeable-pages> for all page divs, and using the length of the result.

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);
  }
});