图片轮播反发行

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

旧版本（效果很好）

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

新版本（附发行）

<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 个解决方案

解决方案1
0 2015-12-08 07:50:55

解决方案2
0 2015-12-08 10:23:53

图片轮播反发行

问题描述

2 个解决方案

解决方案1 0 2015-12-08 07:50:55

解决方案2 0 2015-12-08 10:23:53

解决方案1
0 2015-12-08 07:50:55

解决方案2
0 2015-12-08 10:23:53