title: Trying to use Foundation's Orbit slider in Rails/Ember app
body: <p>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 -- <a href="http://foundation.zurb.com/docs/components/orbit.html" rel="nofollow noreferrer">http://foundation.zurb.com/docs/components/orbit.html</a>.</p>
  
  <p>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.</p>
  
  <p>The only other instructions are to attach <code>data-orbit</code> to whatever element you want to slide through. Mine looks like:</p>
  
  <pre><code>&lt;ul data-orbit&gt;
    &lt;li&gt;&lt;img src="/assets/ewabout_1.jpg" class="carousel-pics"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="/assets/ewabout_2.jpg" class="carousel-pics"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="/assets/ewabout_3.jpg" class="carousel-pics"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="/assets/ewabout_4.jpg" class="carousel-pics"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="/assets/ewabout_5.jpg" class="carousel-pics"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>But when I load the page the images are just stacked on top of one another, like the app can't find the javascript.</p>
  
  <p>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?</p>
  
  <p><img src="https://i.stack.imgur.com/wmR6K.png" alt="App directory"></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Changed <code>application.js</code> 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?</p>
  
  <pre><code>//= 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);
    }
  });
  </code></pre>