how to use bxslider plugin in ember.js

Question

I am creating an ember application.In one of the page I am implementing weather api. I am getting the data which I want to display, but cannot implement jquery slider in ember.js framework. This is my template:-

<script type="text/x-handlebars" id="weather">

  <div class="row">
    <div class="col-md-12">
      {{#view App.SliderView}}
        <div class="slider1">
          {{#each item in model}}
            {{#each item1 in item}}
              <div class="slide">
                <div class="image">
                   <img src="{{unbound item1.weather.0.main}}.jpg"/>
                </div>
              </div>
            {{/each}}
          {{/each}}
        </div>
      {{/view}}
    </div>
  </div>

</script>

This is the view that I have created:-

App.SliderView = Ember.View.extend({
  didInsertElement:function(){
    $(".slider1").bxSlider({
      slideWidth: 200,
      minSlides: 1,
      maxSlides: 3,
      slideMargin: 0
    });
  }
});

The slider is not working after integrating it with ember.js. Presently I am just showing the images as per the data returing from weather api. Thanks in advance.

Patsy Issa · Answer 1 · 2014-08-11T18:08:42.850

Might be a bit late for an answer but might as well post a solution, the problem with didInsertElement it means the view was inserted but it doesn't mean the elements of that view have been loaded.

To fix that use Ember.run.next(function(){...});, now in ember to access the dom with jquery you do it in the following manner:

this.$('yourselector');

In order to preserve the scope of this cache it:

var that = this;

Your final code would look something like this:

App.SliderView = Ember.View.extend({
    didInsertElement: function () {
        var that = this;
        Ember.run.scheduleOnce('afterRender', function () {
            that.$(".slider1").bxSlider({
                slideWidth: 200,
                slideSelector:'.slide',
                minSlides: 1,
                maxSlides: 3,
                slideMargin: 0
            });
        });
    }
});

Also it is worth noting that handlebars adds script tags to the rendered output, bxslider by default uses all children of the current container it's been initialized on, so you have to specify slideSelector for it to work properly.

how to use bxslider plugin in ember.js

1 Answers1