Templates 属性绑定到滑动页面中的聚合物模板

我对web开发还不熟悉，我在这里遇到了一个障碍，从

基本上，我想通过在滑动页面的内容中放置一个模板，从“滑动页面”中生成一个“滑动图像”。换句话说，我想将字符串数组（图像的位置）作为属性传递给polymer元素，元素中的滑动页面应该自动生成包含图像的滑动页面

我尽量避免使用java脚本，并利用聚合绑定。我甚至将模板扩展为一个滑动页面

这是到目前为止的代码，它没有按预期工作。这种方法正确吗？或者我应该为滑动图像重新设计滑动页面。但是，模板绑定应该可以工作

<link rel="import" href="../swipe-pages-master/swipe-pages.html">
<link rel="import" href="../swipe-pages-master/swipe-page.html">

<polymer-element name="lesson-card-mini" attributes="items">
            <template>
                <style>
                    :host {
                        display: block;
                        position: relative;
                        padding: 0px;
                        width: 100%;
                    }
                    .content2 {
                        padding: 2px;
                        border: 1px solid #dedede;
                        border-top: none;
                        border-bottom-left-radius: 5px;
                        border-bottom-right-radius: 5px;
                        background: black;
                    }
                </style>

                <div class="content2" style="width: auto; height: auto;"> 
                    <swipe-pages id="pgs" style="color: white;">
                        <template extends="swipe-page" repeat="{{item in items}}">               
                               <img src="{{item}}" style="width: 20px; height 20px"/>           
                        </template>
                    </swipe-pages>  
                </div>  

            </template>
            <script>
                Polymer('lesson-card-mini',
                        {
                            created: function() {

                            },
                            ready: function() {

                            },
                            toggle: function() {

                            }
                        });

            </script>
        </polymer-element>

    <polymer-element name="select-main">
        <template>
            <style>

            </style>

            <div vertical layout center center-justified>

                <lesson-card-mini style="width: 100%; height: 500px;"
                                  items="['../images/01.png',
                                                     '../images/02.png',
                                                     '../images/03.png']"></lesson-card-mini>
            </div>

        </template>
        <script>

            Polymer('select-main',
            {

            });

        </script>
    </polymer-element>

：主持人{
显示：块；
位置：相对位置；
填充：0px；
宽度：100%；
}
.内容2{
填充：2px；
边框：1px实心#dedede；
边界顶部：无；
边框左下半径：5px；
边框右下半径：5px；
背景：黑色；
}
聚合物（'lesson-card-mini'，
{
已创建：函数（）{
},
就绪：函数（）{
},
切换：函数（）{
}
});
聚合物（'select-main'，
{
});

---

有人有这样的示例代码吗？

我做了如上所述的更改，代码正常工作。事实证明，我没有初始化聚合元素构造函数中的数组（属性），这非常重要

以下代码适用于，。。。。。。。。。。现在我有了一个“图像扫描”

：主持人{
显示：块；
位置：相对位置；
填充：0px；
宽度：100%；
}
.内容2{
填充：2px；
边框：1px实心#dedede；
边界顶部：无；
边框左下半径：5px；
边框右下半径：5px；
背景：黑色；
}
聚合物（'lesson-card-mini'，
{
已创建：函数（）{
this.imglinks=[]；//此行很重要
},
就绪：函数（）{
},
切换：函数（）{
}
});
聚合物（'select-main'，
{
});

有了这个，我就可以用一个字符串数组来创建页面。也许一个改进是让页面通过模板选择器破译链接以显示图像、视频、PDF文件、文本文件等。如果有自动动画支持，也可以成为图像旋转木马和滑块

---

谢谢，希望这有帮助

我肯定会尝试这段代码，但在浏览完代码后，我想知道，如果您（在顶部）

像中一样，而不是让模板扩展swipe pageAwesome，它会工作吗！顺便说一下，考虑将IMGLink属性设置为

<link rel="import" href="../swipe-pages-master/swipe-pages.html">
<link rel="import" href="../swipe-pages-master/swipe-page.html">

<polymer-element name="lesson-card-mini" attributes="imglinks">
            <template>
                <style>
                    :host {
                        display: block;
                        position: relative;
                        padding: 0px;
                        width: 100%;
                    }
                    .content2 {
                        padding: 2px;
                        border: 1px solid #dedede;
                        border-top: none;
                        border-bottom-left-radius: 5px;
                        border-bottom-right-radius: 5px;
                        background: black;
                    }
                </style>

                <div class="content2" style="width: auto; height: auto;"> 
                    <swipe-pages id="pgs" style="color: white;">
                        <template repeat="{{imglink in imglinks}}"> 
                            <swipe-page>
                                <img src="{{imglink}}" style="width: 20px; height: 20px"/>  
                            </swipe-page>          
                        </template>
                    </swipe-pages>
                </div>  

            </template>
            <script>
                Polymer('lesson-card-mini',
                        {
                            created: function() {
                                this.imglinks = []; // This line is important
                            },
                            ready: function() {

                            },
                            toggle: function() {

                            }
                        });

            </script>
        </polymer-element>

    <polymer-element name="select-main">
        <template>
            <style>

            </style>

            <div vertical layout center center-justified>

                <lesson-card-mini style="width: 100%; height: 500px;"
                                  imglinks="['../images/01.png',
                                                     '../images/02.png',
                                                     '../images/03.png']"></lesson-card-mini>
            </div>

        </template>
        <script>

            Polymer('select-main',
            {

            });

        </script>
    </polymer-element>