Trying to use Foundation's Orbit slider in Rails/Ember app

Question

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

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.

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.