向 emberJS 模板页面添加幻灯片

Question

编辑：做了更多的挖掘，emberJS 不允许内联脚本执行。我将如何着手制作幻灯片？我要创建组件吗？

我刚开始使用 emberJS。我已按照 Ember 网站上的指南进行操作，并在此处学习，但我发现自己陷入了困境，我需要您的帮助！

情况是这样的：我想在我的模板之一中添加幻灯片。现在，尽我所能，我使用 'BOWER INSTALL' 添加了幻灯片 .js 和 .css，然后编辑我的 'ember-cli-build.js' 以引用这两个依赖项的 app.import。

是'About Me'、'Services'、'Contact Us'等基本网站页面。没有什么花哨。假设我想将此幻灯片添加到 'Services' 页面，起初当我访问该网站时它加载时没有任何问题，但是当我使用 {{#link- 在 templates/pages 之间切换时}} 功能它消失，不会再次加载。

谁能解释我应该如何在模板上添加内联脚本？

抱歉初学者的问题。

为了让我运行放映幻灯片，我需要在页面上的DOM元素之后执行以下脚本。

<script type="text/javascript">
      $(window).load(function() {
        $('.flexslider').flexslider();
      });
</script>

HTML如下：

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://placehold.it/350x150/0889d8/000000" />
    </li>
    <li>
      <img src="http://placehold.it/350x150/c1a4f0/ffffff" />
    </li>
    <li>
      <img src="http://placehold.it/350x150/8b4513/000000" />
    </li>
  </ul>
</div>

Answer 1

您可以使用已经做到这一点的 ember 插件：ember-cli-slick

使用以下方式安装：

ember install ember-cli-slick

您可以像这样在模板中使用它：

{{#slick-slider autoplay=true arrows=false}}
    <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
    <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
    <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
    <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
{{/slick-slider}}

如果您想了解如何制作幻灯片组件，请查看此处的源代码： https://github.com/laantorchaweb/ember-cli-slick/blob/master/addon/components/slick-slider.js

这只是 slick.js 插件的包装组件。您可以对 flexslider 插件执行相同的操作。

Answer 2

我尝试使用 slick 插件，但运行遇到了问题。所以我创建了另一个 ember 插件来包装 jquery unslider plugin. Check out ember-cli-unslider.

参见simple demo。

un-slider 组件需要一组幻灯片。在其块中，您必须定义用于每张幻灯片的 HTML 内容。

{{#un-slider slides=model as |slide|}}
<img src="{{slide.url}}"/>
{{/un-slider}}

在上面的示例中，model 可能如下所示：

[
  { url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 1&w=600&h=400' }, 
  { url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 2&w=600&h=400' }, 
  { url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 3&w=600&h=400' }
];

向 emberJS 模板页面添加幻灯片

adding a slideshow to emberJS template page

javascript

ember.js

flexslider

ember-cli