编辑:做了一些更多的挖掘,emberJS 不允许内联脚本执行。我将如何创建幻灯片?我要创建一个组件吗?
我刚刚开始使用 emberJS。我按照 Ember 网站上的指南进行操作,并在这里学习,但我发现自己陷入了困境,我需要你的帮助!
情况是这样的: 我想将幻灯片添加到我的模板之一。现在,我已尽我所能,使用“BOWER INSTALL”添加了幻灯片 .js 和 .css,然后编辑“ember-cli-build.js”以引用这两个依赖项的 app.import。
这是一个基本的网站页面,例如“关于我”、“服务”、“联系我们”。没有什么花哨。假设我想将此幻灯片添加到“服务”页面,首先当我访问该网站时,它加载没有问题,但当我使用 {{#link-to}} 函数在模板/页面之间切换时,它消失并获胜不再加载。
谁能解释一下我应该如何在模板上添加内联脚本?
很抱歉提出初学者的问题。
为了运行幻灯片放映,我需要在页面上的 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>
最佳答案
我尝试使用光滑的插件,但遇到了问题。所以我创建了另一个 ember 插件来包装 jquery unslider插入。查看ember-cli-unslider .
请参阅simple demo .
un-slider
组件需要一个幻灯片数组。您必须在其 block 中定义每张幻灯片使用的 HTML 内容。
{{#un-slider slides=model as |slide|}}
<img src="{{slide.url}}"/>
{{/un-slider}}
在上面的示例中,模型
可能如下所示:
[
{ 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' }
];
关于javascript - 将幻灯片添加到 emberJS 模板页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33508397/