flexslider item width funktioniert nicht mit riotjs

Question

Ich versuche Flexslider in Riotjs App zu erreichen. Der Schieberegler funktioniert gut, aber wenn ich die benutzerdefinierte Elementbreite für den Schieberegler festlege, funktioniert das nicht. Laut den Unterlagen soll es funktionieren.

self.on('updated', function(){ 
    $('.flexslider').flexslider({ 
    animation: "slide", 
//    itemWidth: 210, 
//    itemMargin: 5, 
      controlsContainer: ".flex-container", 
      start: function (slider) { 
      $('.total-slides').text(slider.count); 
      }, 
      after: function (slider) { 
      $('.current-slide').text(slider.currentSlide); 
      } 
    }); 
}); 

Aufruhr Komponente:

<rsc-component id="dropBox" class="mybox col-lg-12"> 
    <div class="flexslider"> 
     <ul class="slides"> 
      <li> 
       <img src="../images/slide1.jpg" alt=""/> 
      </li> 
      <li> 
       <img src="../images/slide2.png" alt=""/> 
      </li> 
     </ul> 
    </div> 
</rsc-component> 

Answer 1

Geben Sie einen Namen flexslider und intern darauf verweisen, anstatt die Jagd nach ihm jquery verwenden.

<rsc-component id="dropBox" class="mybox col-lg-12"> 
    <div class="flexslider" name="flexslider"> 
    <ul class="slides">...</ul> 
    </div> 
<script> 
... 
//store reference to flexslider 
this.on('mount',function(){ 
this.$flexslider = $(this.flexslider); // from the name property in template 
}); 

this.on('updated',function(){ 
// I would have at a guess that the flexslider needs to recalc itself, so 
// destroy it and regenerate. 
this.$flexslider.detach().flexslider({...}) 
}); 

</script> 
</rsc-component>