javascript - 更改 polymer 转盘上的文本

Question

我正在尝试学习 polymer ，并且正在遵循本教程:

https://codelabs.developers.google.com/codelabs/polymer-2-carousel/index.html?index=..%2F..%2Findex#1

但是，教程没有展示如何将文本与轮播中的图像关联，即我希望在单击轮播上的按钮时更改文本

<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!-- Load the Polymer.Element base class -->
<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="my-mixin.html">

<dom-module id="my-carousel">
  <template>

    <!-- Styles MUST be inside template -->
    <style>

      :host {
        display: block;
        position: relative;
        overflow: hidden;
      }

      div > ::slotted(:not([selected])) {
        display: none;
      }

      button {
        position: absolute;
        top: calc(50% - 20px);
        padding: 0;
        line-height: 40px;
        border: none;
        background: none;
        color: #DDD;
        font-size: 40px;
        font-weight: bold;
        opacity: 0.7;
      }

      button:hover,
      button:focus {
        opacity: 1;
      }

      #prevBtn {
        left: 12px;
      }

      #nextBtn {
        right: 12px;
      }

      button[disabled] {
        opacity: 0.4;
      }

    </style>

    <div>
      <slot></slot>
    </div>

   <div id="buttons"> <button id="prevBtn" on-click="previous">&#x276E;</button>
       <button id="nextBtn" on-click="next">&#x276F;</button></div>

 

  </template>
 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>
    
  <script>

    // Extend Polymer.Element with MyMixin
    class MyCarousel extends MyMixin(Polymer.Element) {

      static get is() { return 'my-carousel' }

      _selectedChanged(selected, oldSelected) {
        super._selectedChanged(selected, oldSelected);

        if (selected) {
          this.$.prevBtn.disabled = !selected.previousElementSibling;
          this.$.nextBtn.disabled = !selected.nextElementSibling;

          this._loadImage(selected);
          this._loadImage(selected.previousElementSibling);
          this._loadImage(selected.nextElementSibling);
        } else {
          this.$.prevBtn.disabled = true;
          this.$.nextBtn.disabled = true;
        }
      }

      previous() {
        const elem = this.selected && this.selected.previousElementSibling;
        if (elem && !this._touchDir) {
          // Setup transition start state
          const oldSelected = this.selected;
          this._translateX(oldSelected, 0);
          this._translateX(elem, -this.offsetWidth);

          // Start the transition
          this.selected = elem;
          this._translateX(oldSelected, this.offsetWidth, true /* transition */);
          this._translateX(elem, 0, true /* transition */);
        }
      }

      next() {
        const elem = this.selected && this.selected.nextElementSibling;
        if (elem && !this._touchDir) {
          // Setup transition start state
          const oldSelected = this.selected;
          this._translateX(oldSelected, 0);
          this._translateX(elem, this.offsetWidth);

          // Start the transition
          this.selected = elem;
          this._translateX(oldSelected, -this.offsetWidth, true /* transition */);
          this._translateX(elem, 0, true /* transition */);
          
            
        }
          
          
          
          
          
          
          
          
      }

      _loadImage(img) {
        if (img && !img.src) {
          img.src = img.getAttribute('data-src');
        }
      }

      _translateX(elem, x, transition) {
        elem.style.display = 'block';
        elem.style.transition = transition ? 'transform 0.2s' : '';
        elem.style.transform = 'translate3d(' + x + 'px, 0, 0)';
      }

      ready() {
        super.ready();
        requestAnimationFrame(this._installListeners.bind(this));
      }

      _installListeners() {
        this.addEventListener('transitionend', this._resetChildrenStyles.bind(this));
        this.addEventListener('touchstart', this._touchstart.bind(this));
        this.addEventListener('touchmove', this._touchmove.bind(this));
        this.addEventListener('touchend', this._touchend.bind(this));
      }

      _resetChildrenStyles() {
        let elem = this.firstElementChild;
        while (elem) {
          elem.style.display = '';
          elem.style.transition = '';
          elem.style.transform = '';
          elem = elem.nextElementSibling;
        }
      }

      _touchstart(event) {
        // No transition if less than two images
        if (this.childElementCount < 2) {
          return;
        }

        // Save start coordinates
        if (!this._touchDir) {
          this._startX = event.changedTouches[0].clientX;
          this._startY = event.changedTouches[0].clientY;
        }
      }

      _touchmove(event) {
        // No transition if less than two images
        if (this.childElementCount < 2) {
          return;
        }

        // Is touchmove mostly horizontal or vertical?
        if (!this._touchDir) {
          const absX = Math.abs(event.changedTouches[0].clientX - this._startX);
          const absY = Math.abs(event.changedTouches[0].clientY - this._startY);
          this._touchDir = absX > absY ? 'x' : 'y';
        }

        if (this._touchDir === 'x') {
          // Prevent vertically scrolling when swiping
          event.preventDefault();

          let dx = Math.round(event.changedTouches[0].clientX - this._startX);
          const prevChild = this.selected.previousElementSibling;
          const nextChild = this.selected.nextElementSibling;

          // Don't translate past the current image if there's no adjacent image in that direction
          if ((!prevChild && dx > 0) || (!nextChild && dx < 0)) {
            dx = 0;
          }

          this._translateX(this.selected, dx);
          if (prevChild) {
            this._translateX(prevChild, dx - this.offsetWidth);
          }
          if (nextChild) {
            this._translateX(nextChild, dx + this.offsetWidth);
          }
        }
      }

      _touchend(event) {
        // No transition if less than two images
        if (this.childElementCount < 2) {
          return;
        }

        // Don't finish swiping if there are still active touches.
        if (event.touches.length) {
          return;
        }

        if (this._touchDir === 'x') {
          let dx = Math.round(event.changedTouches[0].clientX - this._startX);
          const prevChild = this.selected.previousElementSibling;
          const nextChild = this.selected.nextElementSibling;

          // Don't translate past the current image if there's no adjacent image in that direction
          if ((!prevChild && dx > 0) || (!nextChild && dx < 0)) {
            dx = 0;
          }

          if (dx > 0) {
            if (dx > 100) {
              if (dx === this.offsetWidth) {
                // No transitionend will fire (since we're already in the final state),
                // so reset children styles now
                this._resetChildrenStyles();
              } else {
                this._translateX(prevChild, 0, true);
                this._translateX(this.selected, this.offsetWidth, true);
              }
              this.selected = prevChild;
            } else {
              this._translateX(prevChild, -this.offsetWidth, true);
              this._translateX(this.selected, 0, true);
            }
          } else if (dx < 0) {
            if (dx < -100) {
              if (dx === -this.offsetWidth) {
                // No transitionend will fire (since we're already in the final state),
                // so reset children styles now
                this._resetChildrenStyles();
              } else {
                this._translateX(this.selected, -this.offsetWidth, true);
                this._translateX(nextChild, 0, true);
              }
              this.selected = nextChild;
            } else {
              this._translateX(this.selected, 0, true);
              this._translateX(nextChild, this.offsetWidth, true);
            }
          } else {
            // No transitionend will fire (since we're already in the final state),
            // so reset children styles now
            this._resetChildrenStyles();
          }
        }

        // Reset touch direction
        this._touchDir = null;
      }

    }

    // Register custom element definition using standard platform API
    customElements.define(MyCarousel.is, MyCarousel);

  </script>
</dom-module>

Answer 1

你不能 - 不像教程中那样。

您的“lorems”被硬编码在index.html内，因此要实现您想要获得的行为，您需要以类似的方式将它们包装在另一个自定义元素中 my-carousel 是结构化的，并使用数据绑定(bind)在两者之间传播更改事件:

<my-carousel selected={{selected}}>
  <img data-src="https://app-layout-assets.appspot.com/assets/bg1.jpg">
  <img data-src="https://app-layout-assets.appspot.com/assets/bg2.jpg">
  <img data-src="https://app-layout-assets.appspot.com/assets/bg3.jpg">
  ...
</my-carousel>
<my-text-selector selected={{selected}}>
  <p>Lorem ipsum...</p>
  <p>Lorem ipsum...</p>
  <p>Lorem ipsum...</p>
  ...
<my-text-selector>

您需要根据 selected 属性的更改来实现内容切换。上面的内容还需要包装在 dom-bind 中，因为它不在 polymer 托管元素内，而是在 index.html 中。

另请参阅 Polymer Starter Kit，了解使用基本上管理内容切换的 iron-pages 元素的示例。