为了尝试在 Polymer 元素内使用轮播功能,我以编程方式在我的元素脚本内创建了 Slick 轮播所需的标记。假设在此代码片段中 this.videos 已作为包含 youtube 视频信息的对象数组加载,特别是 id 和 name 属性:
// Create Carousel Container
var carousel = $('<div id="carousel"></div>');
// Add Slides
this.videos.forEach(function(element, index, array){
// Create a template for each slide
var slideTemplate = $('<div><iframe width="420" height="315" src="//www.youtube.com/embed/' + element.id + '" frameborder="0" allowfullscreen></iframe></div>');
// Append Each Slide to the Carousel
slideTemplate.appendTo(carousel);
// jQuery Method
$('#carousel').appendChild("<div></div>");
});
上面的“append*”方法都不起作用,生成的 DOM 不包含 div#carousel 元素。将 HTML 添加到 Polymer 元素的模板的正确方法是什么?
Here is a previous SO question我问这解释了为什么我必须尝试这种在 javascript 元素内注入(inject)标记的方法。它与标记中挥之不去的模板标签有关 > 在更新 2 下查看完整的破败。
最佳答案
没有理由编写代码 :) 最好的方法是使用 Polymer 的数据绑定(bind)功能,并提前设置 DOM 模板。通常,您永远不需要像这样接触 DOM。这是基本的想法:
<div id="carousel">
<template repeat="{{v in videos}}">
<div><iframe src="//www.youtube.com/embed/{{v.id}}"></iframe></div>
</template>
</div>
当 this.videos
被填充时,模板引擎会自动为您标记标记。
关于polymer - 从 Javascript 在 Polymer 元素的模板中添加或附加 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22946873/