余烬中的光滑幻灯片.js模板

Slick slideshow in ember.js template

本文关键字：js 模板 幻灯片 余烬中      更新时间：2023-09-26

嘿伙计们，我试图在 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')
});
相关文章：