Ползунок Emberjs не работает как ожидается

Question

Я строю обычную карусель в ember и JQuery. Очень прямолинейно. при нажатии nextImage ползунок перемещает следующее изображение и при нажатии PreviewsImage ползунок возвращается к изображению предварительного просмотра. Эта часть работает идеально. Проблема в том, что при нажатии на goToImage (контроллеры AKA Dots) изображения не перемещаются в соответствующий порядок точек. Похоже, моя логика может иметь некоторые проблемы.

<nav class="dots"> 
     <a href="#" class="carousel-bullet "{{action 'goToImage' 1}}></a> 
     <a href="#" class="carousel-bullet"{{action 'goToImage' 2}}></a> 
     <a href="#" class="carousel-bullet"{{action 'goToImage' 3}}></a> 
    </nav> 

    App.SliderComponent = Ember.Component.extend({ 
     currentIndex: 0, 

     actions: { 
      runSlider: function(x){ 
       var currentIndex = this.get('currentIndex'); 
       var indexDiff = this.$().find('.carousel ul li').index(); 
       var carousel = this.$().find('.carousel ul'), 
        slideWidth = carousel.find('li').width(); 
        console.log(indexDiff); 
       if(x == 1){ 
        carousel.animate({left: - slideWidth }, 200, function() { 
         carousel.find('li:first-child').appendTo(carousel); 
         carousel.css('left', ''); 
        }); 
       }else{ 
        carousel.animate({left: + slideWidth}, 200, function() { 
         carousel.find('li:last-child').prependTo(carousel); 
         carousel.css('left', ''); 
        }); 
       } 
      }, 
      nextImage: function(){ 
       this.send('runSlider', 1); 
      }, 
      previewsImage: function(){ 
       this.send('runSlider',0); 
      }, 
      goToImage: function(newIndex){ 
       var currentIndex = this.get('currentIndex') 
       var indexDiff = newIndex - currentIndex; 
       var direction = (newIndex > currentIndex) ? 'nextImage' : 'previewsImage'; 
       for (var i = 0; i < indexDiff; i++){ 
        this.send(direction); 
       } 
      } 
     } 
    }); 

Answer 1

Ваш indexDiff может быть отрицательным. Например, если новый индекс равен 0, а текущий индекс равен 2. В этом случае цикл for в вашем коде не будет работать. Думаю, смена var indexDiff = newIndex - currentIndex; на var indexDiff = Math.abs(newIndex - currentIndex); поможет. Если это не поможет, я бы предложил поставить console.log(x); в первой строке runSlider, чтобы посмотреть, вызвано ли оно и что передается.