Javascript 向emberJS模板页面添加幻灯片

EDIT：进行了更多的挖掘，emberJS不允许内联脚本执行。我该如何制作幻灯片？是否创建组件？

我只是从emberJS开始的。我已经遵循了恩伯网站上的指南，并在这里学习，但我发现自己有点走不通了，我需要你的帮助

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

这是一个基本的网站页面，如“关于我”、“服务”、“联系我们”。没什么特别的。假设我想将此幻灯片添加到“服务”页面，首先，当我访问加载的站点时，它没有问题，但当我使用{{#link to}}功能在模板/页面之间切换时，它将消失，并且不会再次加载

有人能解释一下我应该如何在模板上添加内联脚本吗

对于初学者的问题，我很抱歉

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

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

$（窗口）。加载（函数（）{
$（'.flexslider'）.flexslider（）；
});

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>

您可以使用一个已经具备以下功能的ember插件：

使用以下方式安装：

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

{{{#光滑滑块自动播放=真箭头=假}
{{/光滑滑块}}

如果您想了解如何制作幻灯片组件，请查看以下源代码：

---

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

您可以使用一个已经执行此操作的ember插件：

使用以下方式安装：

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

{{{#光滑滑块自动播放=真箭头=假}
{{/光滑滑块}}

如果您想了解如何制作幻灯片组件，请查看以下源代码：

---

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

我尝试使用slick插件，但遇到了问题。所以我创建了另一个ember插件来包装插件。退房

看

un滑块

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

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

---

我试图使用光滑的插件，但遇到了问题。所以我创建了另一个ember插件来包装插件。退房

看

un滑块

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

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

---

非常感谢你！这正是我一直在寻找的，现在我将开始挖掘ember cli插件，看看是否可以节省时间并学习新东西。如果我想说，创建我自己的jQuery函数，我需要将其封装在组件中，那么我的想法对吗？通常，当你想在一些DOM元素上应用jQuery函数时，你可以在组件的didInsertElement函数中进行。查看本教程：@BriscBogdan我需要使用asNavFor选项如何将选项传递给滑块？非常感谢！这正是我一直在寻找的，现在我将开始挖掘ember cli插件，看看是否可以节省时间并学习新东西。如果我想说，创建我自己的jQuery函数，我需要将其封装在组件中，那么我的想法对吗？通常，当你想在一些DOM元素上应用jQuery函数时，你可以在组件的didInsertElement函数中进行。查看本教程：@BriscBogdan我需要使用asNavFor选项如何将选项传递给滑块？