Question

我试图将我的图片轮播/滑块升级到Polymer 1.0。逻辑与我在Polymer 0.5中使用的逻辑相同。但是，当我使用异步来循环该方法时，计数器似乎增加2或者更确切地说它增加1，并在触发异步之前再添加1。这里似乎有什么问题？

使这一点更清晰：说我有一个计数器变量。在旧版本中，它会像这样打印。

1, wait 5 seconds, 2, wait 5s, 3, wait 5s,....

使用新版本时，它是：

1,2, wait 5s, 3,4, wait 5s,....

OLD VERSION（工作正常）

[https://github.com/DinethH/PWD-Groups-3.0/blob/master/elements/foreground-slider/foreground-slider.html][1]

NEW VERSION（w / issue）

<body>
    <template is="dom-bind">

      <div class="toolbar">
        <button on-click="_onPrevClick">&lt;&lt;</button>
        <button on-click="_onNextClick">&gt;&gt;</button>
      </div>

      <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
        <neon-animatable>
          <iron-image preload sizing="contain" src="img/heroimage1@2x.jpg"></iron-image>
        </neon-animatable>
        <neon-animatable>
          <iron-image preload sizing="contain" src="img/heroimage2@2x.jpg"></iron-image>
        </neon-animatable>
        <neon-animatable>
            <iron-image preload sizing="contain" src="img/heroimage3@2x.jpg"></iron-image>
        </neon-animatable>
        <neon-animatable>
            <iron-image preload sizing="contain" src="img/heroimage4@2x.jpg"></iron-image>
        </neon-animatable>
      </neon-animated-pages>

    </template>

    <script>

      var scope = document.querySelector('template[is="dom-bind"]');
      scope.selected = -1;
      scope.counter = 0;
      scope.ready = function() {
       //this.async(function() {
          this.nextCount();
       //});
      }

      scope.nextCount = function () {
          if (this.selected < 3) {
            this.selected = this.selected + 1;
          } else {
            this.selected = 0;
          }
          //console.log(this.selected);
          this.counter++;
          console.log(this.counter);
          this.async(this.nextCount, 6000);
      }

      scope._onPrevClick = function() {
        this.entryAnimation = 'slide-from-left-animation';
        this.exitAnimation = 'slide-right-animation';
        //this.selected = this.selected === 0 ? 4 : (this.selected - 1);
      }

      scope._onNextClick = function() {
        this.entryAnimation = 'slide-from-right-animation';
        this.exitAnimation = 'slide-left-animation';
        //this.selected = this.selected === 4 ? 0 : (this.selected + 1);
      }

    </script>
</body>

Answer 1

在评论中，可能值得研究为什么在脚本中调用ready()函数两次。尝试在脚本中修改这样的代码：

window.addEventListener('WebComponentsReady', function(e) {
    // your previous `<script>` code!
});

Answer 2

dom-bind模板是唯一一个后期绑定的模板实例。它的意思是模仿Polymer元素的行为，但是存在一些限制 - 出于性能原因，Polymer 1.0+作为框架在元素注册时间内进行了大量的连线（即初始化时间，而不是0.5，可以做很多事情）在即时）。所以我不确定dom-bind是否真正遵循了影子DOM定义规定的生命周期方法。

如果将代码包装在适当的dom-module内并从主文档调用它会更好 - 这可以确保事情按照规范运行。

图像轮播柜台问题

2 个答案: