聚合物中的字符转义

Question

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

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

更新：我试过 posted here 方法，但没有成功。

Answer 1

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

Answer 2

您需要做的是计算属性 returns 样式：

<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 以了解它的实际应用。

聚合物中的字符转义

Character escaping in Polymer

polymer