聚合物0.8：HTML标记复杂属性内的数据绑定

Question

I understood that in the newer Polymer release 0.8 binding to an attribute inside a tag should be followed after $ sign. And it works like so:

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

eg this works great:

href$="{{url}}"

But it doesn't work when the attribute gets more complex, eg in my code example:

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

which is a String data attribute.

Is it supported in 0.8 like it was in 0.5 ?

Answer 1

Complex bindings like that are not currently supported in 0.8. Instead you'd probably want to create a computed property and use that.

Btw, you only need to use $={{ }} syntax if you need work with an attribute that doesn't have a corresponding property on an element. Because HTMLAnchorElement (the <a> tag) has an href property, you don't have to use a dollar sign in that case, you can just create a regular binding using href={{url}} .

To put it another way:

href="{{site}}" means "bind this.site to element.href" href$="{{site}}" means "bind this.site to element.attributes.href.value"

You usually only need the $ syntax when working with boolean attributes like hidden or disabled. Or in the case where an element does not have a corresponding property in JavaScript.