Foundation 5 Emberjs slider orbit

Question

Im trying to use the Slider-Orbit with Emberjs but keep running into the issue that when i change views it dissapears but if i resize my browser it appears.

The code is extremely simple: Using Ember 1.2 and Foundation 5

App.IndexView = Ember.View.extend({
  classNames: ['index', 'row'],

  didInsertElement: function() {
    Ember.run.next(this, function() {
      this.$().foundation('orbit');
    });
  }
});



<ul data-orbit data-options="animation:fade;
                         animation_speed:500;
                         bullets:false;
                         navigation_arrows:false;
                         timer:true;
                         timer_speed: 2500;
                         slide_number:false;
                         next_on_click:false;
                         pause_on_hover:false;">
  <li>
    <img src="images/1.jpg" alt="slide 1" />
  </li>
  <li>
    <img src="images/2.jpg" alt="slide 1" />
  </li>
</ul>

Answer 1

It seems that this is a behaviour of foundation orbit when added dynamically, but it will work fine if you set the height to orbit-container .

http://emberjs.jsbin.com/AwOhoYig/1#/

js

App = Ember.Application.create();

    App.IndexView = Ember.View.extend({
      classNames: ['index', 'row'],

      didInsertElement: function() {
          this.$().foundation('orbit');
          this.$('.orbit-container').css('height','200px');
      }
    });

App.Router.map(function() {
  this.route("test");
});

hbs

<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <ul data-orbit data-options="animation:fade;
                         animation_speed:500;
                         bullets:false;
                         navigation_arrows:false;
                         timer:true;
                         timer_speed: 2500;
                         slide_number:false;
                         next_on_click:false;
                         pause_on_hover:false;">
  <li>
    <img src="http://lorempixel.com/400/200/sports/1/" alt="slide 1" />
  </li>
  <li>
    <img src="http://lorempixel.com/400/200/sports/2/" alt="slide 1" />
  </li>
</ul>

{{#link-to 'test'}}go to test view{{/link-to}}
  </script>

  <script type="text/x-handlebars" data-template-name="test">
  <h1>this is a test view</h1>
  <br/>
  {{#link-to 'index'}}go back{{/link-to}}
  </script>