데이터 바인딩이있는 폴리머 이미지

Question

웹 사이트 재 설계에 Polymer을 사용했습니다. 요소에 바인딩 된 이미지를 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;. 다른 곳합니다 (<div class="circular">의 몸에 {{image}}를 사용하는 경우, 이미지는 않습니다 표시됩니다.

직접 링크도 작동과 스타일 내부의 {{image}} 교체

.

내가 잘못을하고있는 중이 야 무엇?

Answer 1

..

이 벌레처럼 보이는 {{}} 템플릿 엔진에 의해 해석되는 대신 문자 그대로 중단되고 [[]] 한 번 바인딩으로 대체 작동합니다 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