データバインディングを使用してアプリケーションヘッダーの背景イメージを変更します

Question

私は初心者ですが、英語は申し訳ありません。 しかし、私は質問があります。

データバインディングを使用してPolymerのapp-header要素の背景イメージを変更したいと考えています。 ルータのページが変更されるたびに、別のヘッダーイメージを表示します。 しかし、このコードは機能しません。 背景画像のCSSを選んで操作する方法がわかりません。

<style> 
    ... 
    --app-header-background-front-layer: { 
     /*This line is working*/ 
     /*background-image: url(/images/tmp/header_image_1.png);*/ 

     /*This line is NOT working*/ 
     background-image: url([[headerImageUrl]]); 
     background-position: left center; 
    }; 
    ... 
</style> 

<script> 
    ... 
    properties: { 
     ... 
     headerImageUrl: { 
      type: String, 
      value: "/images/tmp/header_image_1.png" 
     } 
     ... 
    }, 
    ... 
<script> 

---

私は私の解決策を得ました。 Niklas Langが私にヒントをくれました。 ここに私のコードです。

<style> 
    ... 
    :host { 
     ... 
     /*this custom css property could be changed whenever I want */ 
     --header-image: url(/images/tmp/header_image_1.png); 
     ... 
    } 
    ... 
    --app-header-background-front-layer: { 
     background-image: var(--header-image); 
     background-position: left center; 
    }; 
    ... 
</style> 

<script> 
    ... 
    // this function called when router's page value is changed. 
    setHeader: function() { 
     switch (this.page) { 
      case blabla1: 
       this.customStyle['--header-image'] = 'url(/images/tmp/header_image_1.png)'; 
       this.updateStyles(); 
       break; 
      case blabla2: 
       this.customStyle['--header-image'] = 'url(/images/tmp/header_image_2.png)'; 
       this.updateStyles(); 
       break; 
      case blabla3: 
       this.customStyle['--header-image'] = 'url(/images/tmp/header_image_2.png)'; 
       this.updateStyles(); 
      default : 
       break; 
     } 
    }, 
    ... 
<script> 

Answer 1

あなたのスタイルに実際の要素が不足していると思います。
Polymer mixinを使用する場合は、対応するElementに適用する必要があります（app-headerの場合）。

​​

しかし、あなたのスタイルにバインドすることさえ可能かどうかはわかりません。
あなたが試みることができるのは、インラインスタイルにバインドすることです。ポリマーのドキュメントで
は彼らが

<div style$="color: {{myColor}};"> 

Bind to a target attributeそれを呼び出すしかし、あなたの場合には、私は、これはあなたがミックスインだけでなく、単一のスタイル値を適用しているとして動作するようになっているか全くわかりません。