聚合物含多个组分实例的数据不一致

时间:2018-06-21 14:07:23

标签: polymer

我正在使用mp-slider(聚合物2.0),但需要标题作为链接。我添加了属性liderLink(如下所示),除了所有实例的URL值是最后一个实例的值之外,其他所有东西似乎都在工作。例如,如果我的链接是google.com/1 google.com/2 yahoo.com/1,则所有幻灯片上的链接都是yahoo.com/1

为解决这个问题,我添加了值:function(){return [];我尝试了几种语法版本,但结果没有变化。

对我来说,奇怪的是,使用该属性有三种用途,一个实例具有正确的值,而另外两个则没有。

<link rel="import" href="../polymer/polymer.html">


<dom-module id="mp-caption">
    <template>
        <style>
            #caption {
                width: 100%;
                background: var(--caption-background);
                padding: 5px 20px;
                position: absolute;
                bottom: 0;
                box-sizing: border-box;
                transition: all 2s linear;
            }

            #caption h3, #caption p { color: var(--white-color) }

            #caption h3 {
                font-size: 20px;
                margin: 10px 0;
                padding: 0
            }

            #caption p {
                font-size: 14px;
                margin: 5px;
                padding: 5px 0
            }
        </style>
		 <template is="dom-if" if="{{sliderLink}}">
		 	<div id="caption">
               <h3><a href={{sliderLink}}>{{sliderHeader}}</a></h3><!-- incorrect value for sliderLink here -->
              <p><a href={{sliderLink}}>{{sliderContent}}</a></p><!-- incorrect value for sliderLink here -->
        	<p>{{sliderLink}}</p> <!-- correct value for sliderLink here -->
        	</div>
         </template>
		 <template is="dom-if" if="{{!sliderLink}}">
		 	<div id="caption">
              <h3>{{sliderHeader}}</h3>
              <p>{{sliderContent}}</p>
        	</div>
         </template>
         
    </template>

    <script>
        class mpCaption extends Polymer.Element {
            static get is() {
                return 'mp-caption'
            }

            static get properties() {
                return {
                    
                    sliderHeader: String,
                    sliderContent: String,
                    sliderLink: {String, value: function() { return []; }},
	                
                }
            }
        }

        customElements.define(mpCaption.is, mpCaption);
    </script>

</dom-module>

这三种用途之间的唯一区别是,最后一种用途没有关联。这是一个错误,还是我缺少制作这些属性URL所需的东西?

谢谢

2 个答案:

答案 0 :(得分:1)

尝试绑定到href属性而不是属性:

<a href$={{sliderLink}}>

有关更多信息,请参见Polymer docs on binding to native HTML elements

答案 1 :(得分:0)

凯特·杰弗里斯告诉您,您应该使用属性绑定

<a href$="{{sliderLink}}"></a>

我不知道您如何传递每个属性的值,但是您的示例可以正常工作。

我必须删除位置:绝对位置,这样我才能看到每个标题,而又看不到另一个。

我更改的另一件事是属性slideLink,您返回了一个空数组,但在String类型的属性中没有意义。

在这里您可以看到以下代码:mp-caption code

您可以在此处查看演示:mp-caption demo