使用數據綁定更改應用程序頭背景圖片

Question

我是網絡新手，並且對不好的英語感到抱歉。 但我有問題。

我想使用數據綁定來更改Polymer的應用程序頭元素背景圖像。 每當路由器的頁面改變時，我都想顯示不同的頁眉圖像。 但是這段代碼不起作用。 我不知道如何挑選和處理背景圖像的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時，你應該將它應用到相應的元素，在你的情況下應用程序標題。

​​

但是，我不確定是否可以綁定到你的風格。
你可以嘗試的是綁定到內聯樣式。
聚合物文件，他們稱之爲Bind to a target attribute

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

但在你的情況我不能完全肯定這應該是怎樣爲你申請的mixin而不僅僅是一個單一的樣式值工作。