聚合物图像作为背景与数据绑定

Question

我一直在使用Polymer进行网站重新设计.我想显示一个绑定到元素的图像作为background-image.一个相当简单的任务,但不幸的是我遇到了一些问题.

我制作了一个代码的运行示例以便于测试:点击我.

  <polymer-element name="album-card" attributes="image">

    <template>
      <style>
        :host{
          display: block;
          position: relative;
          background-color: #99182c;
          width: 200px;
        }
        .description{
          padding: 10px;
          color: white;
        }
        .circular{
          width: 200px;
          height: 200px;
          background: url({{image}}) no-repeat;
          background-color:green;
        }
      </style><link rel="stylesheet" href="default_styles.css">

      <paper-shadow z="{{shadowValue}}" animated="true"></paper-shadow>
      <div class="album-header" vertical layout>
        <paper-ripple class="recenteringTouch" fit></paper-ripple>
        <div class="circular">
          <!--<img src="{{image}}" />--><!-- this does work -->
        </div>
        <div class="description">
          <content select="h2"></content>
          <content select="h4"></content>
        </div>
      </div>

    </template>

    <script>
      Polymer('album-card');
    </script>

  </polymer-element>

问题在于css样式.由于某种原因,图像不会在以下行中显示:background: url({{image}}) no-repeat;.但是,当{{image}}在身体其他地方使用时(在<div class="circular">图像中显示.

{{image}}用直接链接替换样式内部也有效.

我究竟做错了什么？

Answer 1

这看起来像一个bug.在{{}}被打断字面上,而不是通过模板引擎被解析.用[[]]一次性绑定替换它们的工作原理如下:http://jsbin.com/yocokire/4/edit

但是,<style>如果可能,您应该避免在内部使用数据绑定(请参阅https://github.com/Polymer/polymer/issues/270#issuecomment-24683309).在polyfill下有perforamnce问题和问题.相反,style在元素上使用属性并在那里进行绑定:http://jsbin.com/riqizige/1/edit