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才能使其正常工作。< / p>

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

1 个答案: