尝试在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中吗？

更新

将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一样。

这是因为您需要在适当的时候初始化orbit插件，也就是说，当html标记已呈现到DOM中时，请阅读如何做。

基本上，我要做的是创建一个Ember.Component （但是视图也应该工作） ，然后将与轨道相关的标记直接放在组件的模板中，然后挂接到组件的didInsertElement中并初始化orbit插件：

轨道滑块组件模板：

<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

希望能帮助到你。