1

我有一个使用 Ember 和 Foundation gem 的 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 视图中的吗？

应用目录

更新

更改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);
  }
});
4

1 回答 1

5

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

这是因为您需要在正确的时刻初始化 orbit 插件，也就是当 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

希望能帮助到你。

于 2013-09-24T23:14:19.170 回答