Image carousel counter issue

Я пытаюсь обновить изображение карусели/слайдера до Polymer 1.0. Логика такая же, как и у Polymer 0.5. Однако, когда я использую async для циклирования метода, счетчик, кажется, увеличивается на 2 или, скорее, добавляет 1, и добавляет еще 1 до запуска асинхронизации. В чем проблема?Image carousel counter issue

Чтобы сделать это более понятным: Скажем, у меня переменная счетчика. В старой версии он будет печататься следующим образом.

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]

НОВАЯ ВЕРСИЯ (ж/выпуска)

<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/[email protected]"></iron-image> 
     </neon-animatable> 
     <neon-animatable> 
      <iron-image preload sizing="contain" src="img/[email protected]"></iron-image> 
     </neon-animatable> 
     <neon-animatable> 
      <iron-image preload sizing="contain" src="img/[email protected]"></iron-image> 
     </neon-animatable> 
     <neon-animatable> 
      <iron-image preload sizing="contain" src="img/[email protected]"></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>

источник

2015-12-07 DinethH

Вы проверили, вызывается ли «готовый» дважды? Я не понимаю, почему это произошло, но, похоже, единственное логическое объяснение, которое я нахожу ... –

Вы правы. Он дважды вызывает вызов внутри = = dom-bind. Я завернул их в пользовательский элемент, и он отлично работает. – DinethH

As i n комментарий, возможно, стоит изучить, почему функция ready() вызывается дважды внутри скрипта. Попробуйте изменить код, как это в скрипте:

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

источник

2015-12-08 07:50:55

dom-bind шаблона является единственным экземпляром шаблона, который запаздывает переплет. Он предназначен для имитации поведения элемента Polymer, но существуют ограничения - по соображениям производительности, Polymer 1.0+ в качестве основы делает много проводных соединений во время регистрации элемента (то есть время инициализации, в отличие от 0,5, где многое можно сделать на лету). Поэтому я не уверен, что dom-bind фактически следует методам жизненного цикла, определенным из теневых определений DOM.

Это намного лучше, если вы оберните свой код внутри надлежащего dom-module и позвоните ему из основного документа - это гарантирует, что все будет работать согласно спецификации.

источник

2015-12-08 10:23:53 zerodevx

Image carousel counter issue

ответ

Смежные вопросы