javascript - Foundation 5 Emberjs slider 轨道

Question

我尝试将 Slider-Orbit 与 Emberjs 一起使用，但一直遇到这样的问题:当我更改 View 时它会消失，但如果我调整浏览器大小它就会出现。

代码非常简单:使用 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");
});

健康管理系统

<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>