Foundation 5 Emberjs滑块轨道

Question

我试图在Emberjs中使用Slider-Orbit，但一直遇到这样的问题：当我更改视图时，它消失了，但是如果我调整浏览器的大小就会出现。

代码非常简单：使用Ember 1.2和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

动态添加时，这似乎是基础轨道的行为，但是如果将height设置为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>