Question

我正在使用Polymer创建一个组件，该组件的背景图像添加了内联样式。问题是在括号和引号内使用双括号使{{imageurl}}像字符串一样。有小费吗？

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

更新：我已经尝试了posted here方法而没有运气。

Answer 1

您需要做的是拥有一个返回样式的计算属性：

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

请注意，此处使用$=的数据绑定到attribute。有关详细信息，请参阅here。

你的JavaScript：

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

请参阅this plunker以了解它的实际效果。

Answer 2

Polymer 1.0中尚不支持字符串插值。请改用computed bindings。

<!-- 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+');';
    }
});

字符在聚合物中逃逸

2 个答案: