【问题标题】:Polymer 0.8: Data binding inside a HTML tag complex attributePolymer 0.8:HTML 标记复杂属性内的数据绑定
【发布时间】:2015-07-11 13:09:51
【问题描述】:

我了解到,在较新的 Polymer 版本 0.8 中,绑定到标签内的属性应该在 $ 符号之后。它的工作原理是这样的:

<tag attribute$="{{DATA}}">

例如这很好用:

href$="{{url}}"

但是当属性变得更复杂时它不起作用,例如在我的代码示例中:

<a style$="background-image: url({{backgroundimage}});">

这是一个字符串数据属性。

它在 0.8 中是否像在 0.5 中一样受支持?

【问题讨论】:

    标签: html data-binding polymer


    【解决方案1】:

    0.8 目前不支持这样的复杂绑定。相反,您可能想要创建 a computed property 并使用它。

    顺便说一句,如果您需要使用在元素上没有相应属性的属性,您只需要使用$={{ }} 语法。因为 HTMLAnchorElement(&lt;a&gt; 标签)有一个href 属性,在这种情况下您不必使用美元符号,您可以使用href={{url}} 创建一个常规绑定。

    换一种说法:

    href="{{site}}" 表示“将 this.site 绑定到 element.href” href$="{{site}}" 表示“将 this.site 绑定到 element.attributes.href.value”

    在处理隐藏或禁用等布尔属性时,您通常只需要 $ 语法。或者在一个元素在 JavaScript 中没有对应属性的情况下。

    【讨论】:

    • 谢谢我使用了计算属性数据绑定。结果如下:&lt;a class="title" href="{{url}}" style$="{{computebackgroundimageurl}}"&gt;&lt;script&gt; Polymer({ is: "card-concept", properties: { backgroundimageurl: { type: String, value: "" }, computebackgroundimageurl: { type: String, computed: 'computebu(backgroundimageurl)' } }, computebu: function(backgroundimageurl) { return 'background-image: url(' + backgroundimageurl + ');'; } }); &lt;/script&gt;
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多