嘿伙计们,我试图在 ember.js 模板中使用光滑的 jquery 插件 (http://kenwheeler.github.io/slick/),但它不起作用。我试图将代码放在"组件"中,但这并没有解决任何问题。
目录:
<script data-template-name="application" type="text/x-handlebars">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="nav-trigger navbar-toggle collapsed hidden-lg hidden-md hidden-sm" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span>
</button>
<a class="navbar-brand">Writers Week</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#/schedule">Schedule</a></li>
<li><a href="#/stream">Stream</a></li>
</div>
</nav>
<div class=".container-fluid">{{outlet}}</div>
</script>
<script data-template-name="index" type="text/x-handlebars">
<h1 class="col-xs-12 col-lg-12 swag">Writers Week</h1>
<div class="your-class col-xs-12 col-lg-12">
<div><img src="http://placehold.it/400x400"></div>
<div><img src="http://placehold.it/400x400"></div>
<div><img src="http://placehold.it/400x400"></div>
</div>
{{Slick}}
</script>
Js 代码:
App.SlickComponent = Ember.Component.extend({
tagName: 'div',
didInsertElement: function() {
$().slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000
});
}
});
这仅显示图像。插件未运行,图像未循环...任何帮助都值得赞赏,谢谢!
几件事:
- 组件名称必须有两个单词,如文档中所述。
- 您需要在组件中使用
this.$()
,以便引用组件自己的 DOM 元素。 div
是组件的默认标记,因此不需要tagName
属性- 通常最好不要覆盖组件的默认方法(例如
didInsertElement
),而是在触发didInsertElement
事件后调用方法。
因此,您的组件最终可能如下所示:
App.SlickSlideshowComponent = Ember.Component.extend({
setup: function() {
this.$().slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000
});
}.on('didInsertElement')
});