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

问题描述

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

我做了一个代码的运行示例，以方便测试：。

 < polymer -element name =album-cardattributes =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 =stylesheethref =default_styles.css> 
 
< paper-shadow z ={{shadowValue}}animated =true>< / paper-shadow> 
< div class =album-headervertical layout> 
< paper-ripple class =recenteringTouchfit>< / 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; 。然而，当在其他地方（在< div class =circular> 中使用 {{image}}

用直接替换样式中的 {{image}}

解决方案

这看起来像一个错误。 {{}} 正在被字面上中断，而不是由模板引擎解析。将它们替换为 [[]] 一次性绑定工程：

但是，如果可能，你应该使用< style> 里面的数据绑定（参见）。有穿孔关注和问题，而是在元素上使用 style 属性，并在那里绑定：

I've been using Polymer for a website redesign. I want to display an image that is bound to an element as a background-image. A fairly simple task, but unfortunately I'm having some issues.

I made a running sample of the code for easy testing: 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>

The issue is in the css styling. For some reason the image doesn't diplay in the following line: background: url({{image}}) no-repeat;. However, when using {{image}} in the body somewhere else (in the <div class="circular">, the image does display.

Replacing the {{image}} inside the styling with the direct link also works.

What am I doing wrong?

解决方案

This looks like a bug. The {{}} are being interrupted literally instead of being parsed by the template engine. Replacing them with [[]] one time bindings works: http://jsbin.com/yocokire/4/edit

However, you should avoi using data-binding inside of <style> if possible (see https://github.com/Polymer/polymer/issues/270#issuecomment-24683309). There are perforamnce concerns and issues under the polyfill. Instead, use a style attribute on the element and do your binding there: http://jsbin.com/riqizige/1/edit

这篇关于聚合物图像作为背景与数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！