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>

slideshow.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()，否则插件会尝试滑动每张幻灯片前后插入的手柄脚本。

Answer 1

是的，你是在正确的轨道上，文件onload将在页面完全呈现之前发生。

您需要将该逻辑添加到组件的didInsertElement挂钩中。然后，您可以将其范围限定为该特定组件实例。另外，我将它从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>

Ember.js jquery循环幻灯片：发现零元素错误

1 个答案:

组件

模板