polymer - 从 Javascript 在 Polymer 元素的模板中添加或附加 HTML

Question

为了尝试在 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 下查看完整的破败。

Answer 1

没有理由编写代码 :) 最好的方法是使用 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 被填充时，模板引擎会自动为您标记标记。