Блог

Я создаю приложение ember.На одной из страниц я реализую weather api. Я получаю данные, которые хочу отобразить, но не могу реализовать jquery slider в ember.js рамки. Это мой шаблон:-

 <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> 
  

Это представление, которое я создал:-

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

Слайдер не работает после его интеграции с ember.js .
В настоящее время я просто показываю изображения в соответствии с данными, полученными из weather api.
Заранее спасибо.

Может быть немного поздно для ответа, но с тем же успехом можно опубликовать решение, проблема с 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 добавляет теги скрипта к отображаемому выводу, bxslider по умолчанию использует все дочерние элементы текущего контейнера, в котором он был инициализирован, поэтому вы должны указать slideSelector , чтобы он работал правильно.