在Java的Polymer Element模板中添加或附加HTML [英] Add or Append HTML inside of a Polymer Element's template from Javascript

问题描述

为了使旋转木马功能在Polymer元素内部工作，我正在以编程方式在我的元素脚本内创建Slick旋转木马所需的标记.假定此代码段已将this.videos作为包含youtube视频信息(特别是id和name属性)的对象数组加载:

In an attempt to get carousel functionality working inside of a Polymer element, I am programmatically creating the markup needed for the Slick carousel inside of my element's script. Assume in this code snippet that this.videos has already been loaded as an array of objects that contain youtube video information, specifically an id and name property:

// 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元素模板的正确方法是什么?

Neither of the "append*" methods above are working, and the resultant DOM contains no div#carousel element. What is the proper way to add HTML to a Polymer element's template?

这是先前的SO问题，我问这解释了为什么我必须尝试这种从javascript元素内部注入标记的方法.这与标记中挥之不去的模板标签有关>在UPDATE 2下查找完整的摘要.

Here is a previous SO question I asked that explains why I have to attempt this method of injecting markup inside the element from javascript. It has to do with that lingering template tag in the markup > look under UPDATE 2 for the full run-down.

推荐答案

没有理由编写代码:)做到这一点的最佳方法是使用Polymer的数据绑定功能，而不是提前设置DOM模板.通常，您永远不需要像这样触摸DOM.这是基本概念:

There's no reason to write code :) The best way to do this is use Polymer's data-binding features rather and setup the DOM template ahead of time. In general, you should never need to touch the DOM like this. Here's the basic idea:

<div id="carousel">
  <template repeat="{{v in videos}}">
    <div><iframe src="//www.youtube.com/embed/{{v.id}}"></iframe></div>
  </template>
</div>

填充this.videos后，模板引擎将自动为您标记标记.

When this.videos is populated, the template engine will automatically stamp the markup for you.

这篇关于在Java的Polymer Element模板中添加或附加HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！