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

Question

我有一个使用Ember和Foundation宝石的rails应用程序。所有这些都按预期工作，直到我尝试使用Foundation的轨道滑块 - 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一样。

这是因为您需要在适当的时刻初始化轨道插件，即将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

希望它有所帮助。