基础5 Emberjs滑块轨道
基础5 Emberjs滑块轨道
提问于 2014-01-03 05:53:42
我试图使用与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>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-01-03 09:00:05
当动态添加时，这似乎是一种基础轨道行为，但如果将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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20897440
复制相关文章
相似问题
腾讯云开发者
