How to use bxslider plugin in ember.js

Question

I am creating an ember application. On one of the pages I use weather api. I get the data that I want to display, but I can not implement the jquery slider in the 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 I created: -

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

The slider does not work after its integration with ember.js. Currently, I am just showing images according to data obtained from weather api. Thanks in advance.

Answer 1

, , , didInsertElement , , , .

Ember.run.next(function(){...});, ember dom jquery :

this.$('yourselector');

, :

var that = 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
            });
        });
    }
});

, handlebars script , bxslider , , slideSelector, .