Polymer 在聚合元素'；来自Javascript的模板

为了让旋转木马功能在聚合元素内部工作，我正在以编程方式在元素脚本内部创建光滑的旋转木马所需的标记。在此代码段中，假设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>");
});

//创建旋转木马容器
变量转盘=$（''）；
//添加幻灯片
this.videos.forEach（函数（元素、索引、数组）{
//为每张幻灯片创建一个模板
var slideTemplate=$（''）；
//将每张幻灯片附加到旋转木马
幻灯片模板附件（旋转木马）；
//jQuery方法
$（“#旋转木马”）.appendChild（“”）；
});

上面的“append*”方法都不起作用，结果DOM不包含div#carousel元素。向聚合元素的模板添加HTML的正确方法是什么

---

我问这就解释了为什么我必须尝试这种从javascript在元素内部注入标记的方法。这与标记中的挥之不去的模板标记有关，请查看更新2下的完整运行情况。

没有理由编写代码：）最好的方法是使用Polymer的数据绑定功能，而不是提前设置DOM模板。一般来说，您不应该像这样触摸DOM。基本思路如下：

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

---

填充

此.videos

后，模板引擎将自动为您标记标记。

感谢Eric的回复。我的第一次尝试使用了您使用模板重复功能从this.videos数组填充标记的方法。我用一些额外的上下文更新了原来的问题，以帮助解释为什么我必须采取不同的方法来实现这一点

生成的标记中的模板标记干扰了Slick的工作能力，因为它需要在div#carousel下面有一系列干净的div，可以在其中操纵以将其转换为幻灯片@埃比德尔：如果你能解释一下聚合物可以或将如何解决这个挥之不去的模板问题，这将有助于理解新的HTML5模板元素应该如何工作

无论如何，我已经找到了如何使用编程方法完成这项工作，我将在这里解释：

我去掉了创建div#carousel的jquery行，而是在模板中恢复了它：

<template>
    ...
    <polymer-jsonp id="jsonp" url="https://spreadsheets.google.com/feeds/list/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/od6/public/values?alt=json-in-script&callback=" response="{{response}}"></polymer-jsonp>

    <div id="carousel"><div>

</template>

...

接下来，这是聚合物构造器中的代码，使其工作：

<script>
    Polymer('video-group', {

        // element is fully prepared
        ready: function(){
            this.$.jsonp.go();            
        },

        // instance of the element is created
        created: function() {
          this.videos = [];
          this.response = {};
        },

        ...

        // Response from JSONP Data Changed Event Handler
        responseChanged: function() {

            // Get the Entry Point for the JSON Feed
            var entries = this.response.feed.entry;

            // Create an empty variable to store the video group
            var videos = [];

            // Push entries from the JSON feed onto the videos array
            for (var i = 0, entry; entry = entries[i]; ++i) {
                videos.push({
                    name: entry.gsx$name.$t,
                    id: entry.gsx$id.$t
                });
            }

            // Set the video group object's array to this newly supplied video array
            this.videos = videos;

            // Create the Carousel
            this.slick();
        },

        // Run the Slick Carousel Command
        slick: function() {

          // Slick it up!
          $('#carousel').slick({
            arrows: true,
              centerPadding: '50',
              dots: true,
              infinite: 'true'
          });

          // 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/' + array[index].id + '" frameborder="0" allowfullscreen></iframe></div>');

              // Append Each Slide to the Carousel
              $('#carousel').slickAdd(slideTemplate);

          });

        }
    });
  </script>

聚合物（‘视频群’{
//元素已完全准备好
就绪：函数（）{
这是$.jsonp.go（）；
},
//创建元素的实例
已创建：函数（）{
这个是.videos=[]；
this.response={}；
},
...
//来自JSONP数据更改事件处理程序的响应
响应更改：函数（）{
//获取JSON提要的入口点
var entries=this.response.feed.entry；
//创建一个空变量来存储视频组
var视频=[]；
//将JSON提要中的条目推送到视频数组中
对于（变量i=0，条目；条目=条目[i]；+i）{
视频。推送({
名称：entry.gsx$name.$t，
id:entry.gsx$id.$t
});
}
//将视频组对象的数组设置为此新提供的视频数组
这个。视频=视频；
//创建旋转木马
这个；
},
//运行Slick Carousel命令
slick:function（）{
//把它弄光滑！
$（'旋转木马'）。光滑({
箭头：是的，
中心填充：“50”，
点：是的，
无限：“真的”
});
//添加幻灯片
this.videos.forEach（函数（元素、索引、数组）{
//为每张幻灯片创建一个模板
var slideTemplate=$（''）；
//将每张幻灯片附加到旋转木马
$（'旋转木马'）.slickAdd（slideTemplate）；
});
}
});

---

responseChanged使用jsonp响应中的视频填充this.videos数组，然后调用slick（）函数，该函数首先在div#carousel元素上创建旋转木马，然后使用slick API函数slickAdd（），将此.videos中的每张幻灯片添加到模板中。

我没有适当的时间阅读其他答案，但总而言之，我要告诉您：第一件事是：jquery不喜欢polyfill，所以为了让它到达内部阴影dom，您应该使用

var foo = document.querySelector('bodyOrhtmlOrWhatever /deep/ id-inside-the-shadow');

或

或者第三种方法，我在聚合物元素或文档中发现的（我不记得了，对不起），那就是

然后使用jquery（哪种方法更简单）使用它

好吧，总结一下“为什么”：0.5.1上的Polyfill查找javascript普通选择器，并相应地更改它们以与非支持阴影dom的浏览器一起工作。 我真的希望能有帮助。它确实帮助了我。任何进一步的问题都会使我兴奋不已

@ebidel解决方案会起作用（他真是太棒了），但我不确定你的库是否愿意使用它

---

我正在编写一个选择器组件，但我不确定它是否能工作，如果能工作，我将发出某种类型的拉取请求。

我有一个非常类似的用例。我所做的是为幻灯片创建一个模板，为幻灯片创建一个模板，然后在我的基本页面中初始化slick。在Slider模板的构造函数中，我使用

factoryImpl

函数添加各个幻灯片

幻灯片模板

玻片=聚合物({
是:"幻灯片",，
factoryImpl：功能（幻灯片）{
//假设幻灯片是一个JS对象，我使用它来设置任何{{
var foo = document.querySelector('moreSpecificSelectorinTheLightDOM ::shadow id-inside-this-shadow-dom');

var foo = `document.querySelector('moreSpecificSelectorinTheLightDOM').shadowRoot
        .querySelector('first-id-or-tag-inside-this-specific-shadow-dom').shadowRoot
        .querySelector('tag-inside-the-shadow-dom'); (...)

$(foo).each(function( index ) {
  console.log( 'do your magic here, "this" means the element being iterated' );
});

<dom-module id="slide">
    <template>
        <div>
            <!-- slide content goes here -->
        </div>
    </template>
    <script>
        Slide = Polymer({
            is: 'slide',
            factoryImpl: function(slide) {
                //Assume slide is a JS object that I use to set any {{properties}} I'll need
                this.property = slide.analagousProperty;
                this.otherProperty = someFunction(slide.analagousProperty);
            },
            properties: {
                //Properties defined here
            }
        });
    </script>
</dom-module>

<dom-module id="slider">
    <template>
        <div id="slider">
        </div>
        <div class="controlHolder">
        </div>
    </template>
    <script>
        Slider = Polymer({
            is: 'slider',
            factoryImpl: function(slides) {
                var destination = Polymer.dom(this.$.slider);
                for (i = 0; i < slides.length; i++) {
                    var slide = new Slide(slides[i]).querySelector('div');
                    destination.appendChild(slide);
                }
                Polymer.dom.flush();
            },
            ready: function() {
                $('#slider').on('afterChange', 
                    function(event, slick, currentSlide) {
                        $('.slick-center .play-button').click(function() {
                        });
                });
            }
        });
    </script>
</dom-module>

<head>
    <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../bower_components/slick-carousel/slick/slick.min.js"></script>
    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../base_slide.html">
    <link rel="import" href="../base_slider.html">
    <link rel="stylesheet" type="text/css" href="../bower_components/slick-carousel/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="../bower_components/slick-carousel/slick/slick-theme.css" />
    <link rel="stylesheet" type="text/css" href="../myCustomStyleSheet.css">
</head>
<body>
    <div class="mainContent"> 
        <h1>Some heading</h1>
    </div>
    <div id="slideContent">
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var slides = [
                {
                    sourceImage: '1.jpg',
                    caption: 'A kindly person'
                },
                {
                    sourceImage: '2.jpg',
                    caption: 'A kindly person'
                },
                {
                    sourceImage: '3.jpg',
                    caption: 'A kindly person'
                },
                {
                    sourceImage: '4.jpg',
                    caption: 'A kindly person'
                },
                {
                    sourceImage: '5.jpg',
                    caption: 'A kindly person'
                },
                {
                    sourceImage: '6.jpg',
                    caption: 'A kindly person'
                },
                {
                    sourceImage: '7.jpg',
                    caption: 'A kindly person'
                }
            ];
            var slider = new Slider(slides);
            document.getElementById('slideContent').appendChild(slider);
            $('#slider').slick({
                arrows: true,
                initialSlide: 4,
                dots: true,
                infinite: true,
                cssEase: 'ease',
                accessibility: true,
                swipeToSlide: true,
                focusOnSelect: true,
                centerMode: true, //Requires odd number of slides to show
                slidesToShow: 5,
                centerPadding: '60px',
                adaptiveHeight: true
            });
        });
    </script>
</body>