css - polymer 图像作为具有数据绑定(bind)的背景

Question

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

为了便于测试，我做了一个代码的运行示例:click me .

  <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}} 时在其他地方的 body 中(在 <div class="circular"> 中，图像确实显示。

替换 {{image}}在带有直接链接的样式中也可以。

我做错了什么？

Answer 1

这看起来像一个错误。 {{}}被字面上中断而不是被模板引擎解析。将它们替换为 [[]]一次性绑定(bind)作品:http://jsbin.com/yocokire/4/edit

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