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

Question

我是 Web 开发的新手，我在这里遇到了来自https://github.com/TheSeamau5/swipe-pages 的滑动页面的障碍

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

我尽量避免使用 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>

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

Answer 1

我按照上述进行了更改，并且代码可以正常工作。原来我没有在聚合物元素构造函数中初始化数组（属性），这非常重要。

下面的代码有效，........现在我有一个“图像滑动”。

<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>

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

谢谢，希望对您有所帮助！