Is it possible to use Foundation's Orbit image slider in Ember?

1

I’m using Foundation on my Rails-backed ember site and it’s been great. I was wondering though if anyone has used the orbit image slider with ember, http://foundation.zurb.com/docs/components/orbit.html?

The foundation rails gem already includes all of the foundation.js files so the only thing left is to add

date-orbit

to whichever element I want to slide. For example:

<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 render the page the images are just stacked, like the js isn’t being called. i feel like Ember is getting in the way some how. Anyone tried to use this?

2

Problem is, Foundation is going to apply the orbit plugin on document ready, about the same time Ember is going to start rendering your templates. What you’ll want to do is create a Component that sets up Orbit as it’s inserting into the view. I’d create an object called App.OrbitComponent that extends Ember.Component. Then in its didInsertElement callback you can call this.$().foundation('orbit', { /* options */ }); You can see the API for manually working with foundation at http://foundation.zurb.com/docs/components/orbit.html.

Do you want me to put together a JSBin showing an example of how to do this?

3

Thanks! That makes sense. Where in the ember file structure should I place the App.OrbitComponent file?

4

If you’re using Rails with ember-rails then app/assets/javascripts/components/orbit_component.js (as a sibling to controllers, routes, views, etc). You will also need a template in app/assets/javascripts/templates/components/orbit.handlebars in order to use the helper like {{#orbit}}...{{/orbit}}.

5

Here’s a bin:

http://emberjs.jsbin.com/opOyiYU/2/edit

6

If you try this with dynamic views then the metamorph data screws it up as it treats it as if it were a slide. I don’t know how to get around this.