聚合物与多个组件实例不一致的数据

Question

我正在使用 mp-slider（聚合物 2.0）但需要标题为 link。我添加了属性 sliderLink（如下所示）除了所有实例的 URL 值是最后一个实例的值外，一切似乎都在工作。例如，如果我的 links 是 google.com/1 google.com/2 yahoo.com/1 所有的 links幻灯片是雅虎。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>

这三种用法的唯一区别是最后一种不是 linked。这是一个错误，还是我缺少制作这些属性 URL 所需的东西？

谢谢

Answer 1

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

<a href$={{sliderLink}}>

有关详细信息，请参阅 Polymer docs on binding to native HTML elements。

Answer 2

正如 Kate Jeffreys 告诉您的那样，您应该使用 属性绑定:

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

我不知道你是如何传递每个值的属性但你的例子没有任何问题。

我不得不删除 position: absolute 这样我就可以看到每个标题而不是一个放在另一个上面。

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

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

在这里您可以查看演示：mp-caption demo

聚合物与多个组件实例不一致的数据

Polymer Inconsistent data with multiple component instances

polymer