Question

我试图将滑块轨道与Emberjs一起使用，但一直遇到这样的问题：当我更改视图时，它会消失，但如果我调整浏览器大小，则会出现。

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

基金会5 Emberjs滑动轨道

1 个答案: