Основание 5 Орбита слайдера Emberjs

Question

Я пытаюсь использовать Слайдер-Орбиту с Emberjs, но все время сталкиваюсь с проблемой, что, когда я меняю виды, она исчезает, но если я изменяю размер моего браузера, она появляется.

код очень прост: Использование Эмбер 1.2 и Фонда 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>