Character escaping in Polymer

问题

I'm creating a component with Polymer which has a background image added with inline styles. The problem is that using double brackets inside parenthesis and quotes makes the {{imageurl}} act like a string. Any tips?

<div class="image-container" style="background-image: url( '{{imageurl}}' )">

Update: I've tried the method posted here with no luck.

回答1:

What you will have to do is have a computed property that returns the style:

<div style$="{{divStyle}}">hi</div>

Note the use of $= here as were are data-binding to an attribute. See here for more info.

And your JavaScript:

Polymer({
  is: "test-element",
  properties: {
    backgroundColor: {
      type: String,
      value: '#FF0000'
    },
    divStyle: {
      computed: 'getDivStyle(backgroundColor)'
    }
  },
  getDivStyle: function(backgroundColor) {
    return 'background-color: ' + backgroundColor + ';';
  }
});

See this plunker to see it in action.

回答2:

String interpolation is not yet supported in Polymer 1.0. Use computed bindings instead.

<!-- Notice the `$` sign. Use attribute binding (`$=`) when binding native elements attribute -->
<div style$="{{_computeBackgroundImage(imageurl)}}"></div>


Polymer({
    ...
    _computeBackgroundImage: function(url) {
        return 'background-image: url('+url+');';
    }
});

来源：https://stackoverflow.com/questions/31448084/character-escaping-in-polymer