Question

嘿伙计们我试图在ember.js模板中使用光滑的jquery插件（http://kenwheeler.github.io/slick/），但它无法正常工作。我试图将代码放在＆＃39;组件中，但是没有解决任何问题。

HTML：

<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
 });
 }
});

这只显示图像。该插件没有运行，图像没有循环...任何帮助都是适当的，谢谢！

Answer 1

一些事情：

组件名称必须包含两个单词as explained in the docs。
您需要在组件中使用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')
});

在ember.js模板中的光滑幻灯片

1 个答案: