尝试在Rails/Ember应用程序中使用Foundation的Orbit滑块

Question

我有一个使用Ember和Foundation宝石的rails应用程序.所有这些都按预期工作,直到我尝试使用Foundation的Orbit滑块 - http://foundation.zurb.com/docs/components/orbit.html.

Foundation gem包含body标签中的所有js文件,因此我需要的两个文件 - foundation.js和foundation.orbit.js - 都在那里.

唯一的其他说明是附加data-orbit到您想要滑过的任何元素.我看起来像:

<ul data-orbit>
  <li><img src="/assets/ewabout_1.jpg" class="carousel-pics"></li>
  <li><img src="/assets/ewabout_2.jpg" class="carousel-pics"></li>
  <li><img src="/assets/ewabout_3.jpg" class="carousel-pics"></li>
  <li><img src="/assets/ewabout_4.jpg" class="carousel-pics"></li>
  <li><img src="/assets/ewabout_5.jpg" class="carousel-pics"></li>
</ul>

但是当我加载页面时,图像只是堆叠在一起,就像应用程序找不到javascript一样.

我觉得这可能是一个余烬问题,但我不确定.我需要在Ember View中添加一些内容吗？

UPDATE

更改application.js为以下和滑块渲染,但将子弹/按钮等相乘页面导致网站崩溃.但至少它会让滑块移动？

//= require jquery
//= require jquery_ujs
//= require foundation
//= require handlebars
//= require ember
//= require_self
//= require ew
Ew = Ember.Application.create({
    ready: function () {
    setInterval(function() {
      $(document).foundation();
    }, 2000);
  }
});

Answer 1

但是当我加载页面时,图像只是堆叠在一起,就像应用程序找不到javascript一样.

这是因为您需要在适当的时刻初始化轨道插件,即将html标记呈现到DOM中,然后阅读如何执行它.

基本上我所做的就是创建一个Ember.Component (但是视图也应该工作),并将轨道相关的标记直接放在组件的模板中,然后挂钩到didInsertElement组件并初始化轨道插件:

轨道滑块组件模板:

<script type="text/x-handlebars" id="components/orbit-slider">
    <ul data-orbit>
      <li><img src="http://placehold.it/400x240/#c2c2c9" class="carousel-pics"></li>
      <li><img src="http://placehold.it/400x240/#c2c2c9" class="carousel-pics"></li>
      <li><img src="http://placehold.it/400x240/#c2c2c9" class="carousel-pics"></li>
      <li><img src="http://placehold.it/400x240/#c2c2c9" class="carousel-pics"></li>
      <li><img src="http://placehold.it/400x240/#c2c2c9" class="carousel-pics"></li>
    </ul>
</script>

轨道滑块组件类:

App.OrbitSliderComponent = Ember.Component.extend({
  initOrbit: function() {
    $(document).foundation('orbit', {
      animation: 'fade',
      timer_speed: 10000,
      pause_on_hover: true,
      resume_on_mouseout: false,
      animation_speed: 500,
      stack_on_small: true,
      navigation_arrows: true,
      slide_number: true,
      container_class: 'orbit-container',
      stack_on_small_class: 'orbit-stack-on-small',
      next_class: 'orbit-next',
      prev_class: 'orbit-prev',
      timer_container_class: 'orbit-timer',
      timer_paused_class: 'paused',
      timer_progress_class: 'orbit-progress',
      slides_container_class: 'orbit-slides-container',
      bullets_container_class: 'orbit-bullets',
      bullets_active_class: 'active',
      slide_number_class: 'orbit-slide-number',
      caption_class: 'orbit-caption',
      active_slide_class: 'active',
      orbit_transition_class: 'orbit-transitioning',
      bullets: true,
      timer: true,
      variable_height: false,
      before_slide_change: function(){},
      after_slide_change: function(){}
    });
  }.on('didInsertElement')
});

在模板中的用法

...
{{orbit-slider}}
...

正如您所看到的,我已经使用了所有可能的配置可能性,只是为了确保它有效,但当然您可以省略它们或相应地更改它们.

这是一个工作演示:http://jsbin.com/iciDiPI/2/edit

希望能帮助到你.