尝试在Rails / Ember应用程序中使用Foundation的Orbit滑块 [英] Trying to use Foundation's Orbit slider in Rails/Ember app

问题描述

我有一个使用Ember和Foundation宝石的rails应用程序。所有这些都按预期工作，直到我尝试使用Foundation的Orbit滑块 -

希望有帮助。

I have a rails app that is using both the Ember and Foundation gems. All has been working as expected until I tried to use Foundation's Orbit slider -- http://foundation.zurb.com/docs/components/orbit.html.

The Foundation gem includes all of the js files in the body tag so both files I need -- foundation.js and foundation.orbit.js -- are there.

The only other instructions are to attach data-orbit to whatever element you want to slide through. Mine looks like:

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

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

I feel like this is probably an ember issue, but I'm not sure. Is there something I need to add to the Ember View?

UPDATE

Changed application.js to the following and the slider renders, but multiplies bullets/buttons etc down the page resulting in the site crashing. But at least it gets the slider moving?

//= 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);
  }
});

解决方案

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

This is because you need to initialize the orbit plugin at the right moment, that is when the html markup has being rendered into the DOM, read along how to do it.

Basically what I've done was to create a Ember.Component (but a view should also work), and put the orbit related markup directly in the component's template, then hook into the didInsertElement of the component and initialize the orbit plugin:

orbit-slider component template:

<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 component class:

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')
});

usage in template

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

As you can see I've used all possible configuration possibilities just to be sure it works, but of course you can omit them or change them accordingly.

Here a working demo: http://jsbin.com/iciDiPI/2/edit

Hope it helps.

这篇关于尝试在Rails / Ember应用程序中使用Foundation的Orbit滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！