javascript - 尝试在 Rails/Ember 应用程序中使用 Foundation 的 Orbit slider

Question

我有一个同时使用 Ember 和 Foundation gem 的 Rails 应用程序。一切都按预期工作，直到我尝试使用 Foundation 的 Orbit slider -- 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 问题，但我不确定。有什么我需要添加到 Ember View 中的吗？

更新

将 application.js 更改为以下内容， slider 呈现，但在页面下方增加了项目符号/按钮等，导致网站崩溃。但至少它能让 slider 移动？

//= 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

But when I load the page the images are just stacked on top of one another, like the app can't find the javascript.

这是因为您需要在适当的时候初始化 orbit 插件，即当 html 标记已呈现到 DOM 中时，请阅读如何执行此操作。

基本上我所做的是创建一个 Ember.Component (但 View 也应该有效)，并将与 rails 相关的标记直接放在组件的模板中，然后挂接到组件的 didInsertElement 并初始化 rails 插件:

orbit-slider 组件模板:

<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>

orbit-slider组件类:

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

希望对您有所帮助。