如何在ember.js中使用bxslider插件

Question

我正在創建一個ember應用程序。在其中一個頁面我實現了天氣api。 我正在獲取我想要顯示的數據，但無法在ember.js框架中實現jquery滑塊。 這是我的模板： -

<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集成后，滑塊無法工作。 目前我只是根據天氣api的數據顯示圖像。 提前致謝。

Answer 1

答案可能有點遲，但也可以發布一個解決方案， didInsertElement的問題意味着插入了視圖，但這並不意味着該視圖的元素已被加載。

要修復它，請使用Ember.run.next(function(){...}); ，現在在ember中使用jquery訪問dom，你可以通過以下方式實現：

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
            });
        });
    }
});

另外值得注意的是，把手將腳本標簽添加到渲染輸出中，默認情況下，bxslider使用已初始化的當前容器的所有子項，因此您必須指定slideSelector才能使其正常工作。