Question

我正在使用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所需的东西？

谢谢

Answer 1

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

<a href$={{sliderLink}}>

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

Answer 2

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

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

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

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

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

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

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

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

2 个答案: