javascript - Ember.js jquery 循环幻灯片 : zero elements found error

Question

我正在将 html 网站转换为 Ember.js 应用程序，并且遇到了 jQuery Cycle 幻灯片插件的问题。我的网站上有大约 10 个幻灯片，因此我想要一个可以在任何地方使用并传递数据的部分幻灯片。

这一切都工作得很好，无论如何，传递数据部分，但幻灯片永远不会被初始化并失败。每次加载页面时我都会得到相同的 "[cycle] terminating; zero elements found by selector"错误并且幻灯片永远不会呈现。

slideshow.js文件包含在 html 文档的头部，我尝试将其移动到页脚并延迟加载，但错误仍然存​​在。

如何修改我的代码，以便在加载模板时初始化幻灯片，因为我觉得问题可能试图在 $(document).ready() 上启动.

<script type="text/x-handlebars" data-template-name="components/main-slider">
<div class="slider_wrap">
  <div id="slider">
    {{#each sliders}}
      <div class="slider_area slider0{{unbound number}}">
        <div class="slider_inner">
          <div class="inner0{{unbound number}}">
            <img {{bind-attr src="image" alt="image"}} class="nosp"/>
            <img {{bind-attr src="sm_image" alt="sm_image"}} class="sp"/>   
          </div>
       </div>
     </div>
    {{/each}}               
  </div>
</div>

幻灯片.js

jQuery(document).ready(function($){
    $('#slider').cycle({
        slideResize:0
    });
    $('#slider').css({
        'width':'auto'
    });
    $(window).resize(function(){
        var height = $('.slider_area').height();
        $('#slider').css("height",height + 'px');
    });
});

app.js

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return App.INDEXSLIDERS;
    }
});

// Data //

App.INDEXSLIDERS = [
    {
        number: 1,
        image: "images/sliders/index/slide1.jpg",
        sm_image: "images/sliders/index/slide1_sm.jpg"
    },
    {
        number: 2,
        image: "images/sliders/index/slide2.jpg",
        sm_image: "images/sliders/index/slide2_sm.jpg"
    },
    {
        number: 3,
        image: "images/sliders/index/slide3.jpg",
        sm_image: "images/sliders/index/slide3_sm.jpg"
    },
    {
        number: 4,
        image: "images/sliders/index/slide4.jpg",
        sm_image: "images/sliders/index/slide4_sm.jpg"
    }
];

注意

必须添加

slideExpr: '.slider_area'

调用.cycle()否则插件将尝试滑动在每张幻灯片之前和之后插入的 Handlebars 脚本。

Answer 1

是的，您走在正确的轨道上，文档加载将在页面完全呈现之前发生。

您需要将该逻辑添加到组件的 didInsertElement Hook 中。然后您可以将其范围限制到该特定组件实例。此外，我将其从 id 更改为类，以便您可以获取该实例。

组件

App.MainSliderComponent = Em.Component.extend({
  didInsertElement: function(){
    var thisSlider = this.$('.main_slider');

    thisSlider.cycle({
      slideResize:0
    });
    thisSlider.css({
        'width':'auto'
    });
    $(window).resize(function(){
        var height = thisSlider.height();
        thisSlider.css("height",height + 'px');
    });
  }
});

模板

<script type="text/x-handlebars" data-template-name="components/main-slider">
<div class="slider_wrap">
  <div class="main_slider">
    {{#each sliders}}
      <div class="slider_area slider0{{unbound number}}">
        <div class="slider_inner">
          <div class="inner0{{unbound number}}">
            <img {{bind-attr src="image" alt="image"}} class="nosp"/>
            <img {{bind-attr src="sm_image" alt="sm_image"}} class="sp"/>   
          </div>
       </div>
     </div>
    {{/each}}
  </div>
</div>