如何動態設置類名？

我已經從我的最後一個問題here瞭解到字符串連接在0.9和更高版本中不允許（目前我正在遷移到版本1.0）。如何動態設置類名？

我不得不將每個變量包裝在單獨的HTML元素中。

但是，有時候我需要使用href或class屬性動態分配值。我不能讓它直接工作如下：

<a href="http://example.com/user/{{userid}}">Link text</a>

因爲1.0將不允許字符串連接！

請參閱下面的代碼片段。我試圖從我的index.html傳遞一個屬性值，而這個屬性值反過來應該替換我的自定義元素中的class屬性的值。但它不工作，我明白爲什麼。

<dom-module id="multi-color-bar-chart"> 
 
    <template> 
 
    <div id="chart"> 
 
      <p>{{title}}</p> 
 
      <div class="{{v1bg}}"> 
 
       <!-- I want {{v1bg}} to be replaced by value sent from index.html --> 
 
       <span>{{value1}}</span>% 
 
      </div> 
 
      <div class="v2" style="background:#ffcc00;"> 
 
       <span>{{value2}}</span>% 
 
      </div> 
 
      <div class="v3" style="background:#369925;"> 
 
       <span>{{value3}}</span>% 
 
      </div> 
 
      <div class="clear"></div> 
 
     </div> 
 
     <div class="clear"></div> 
 
    </template> 
 
    <script> 
 
     (function() { 
 
      Polymer({ 
 
       is: 'multi-color-bar-chart', //registration of element 
 
       properties: { 
 
        title: { type: String }, 
 
        value1: { type: String }, 
 
        value2: { type: String }, 
 
        value3: { type: String }, 
 
        v1bg: { type: String } 
 
       } 
 
      }); 
 
     })(); 
 
    </script> 
 
</dom-module>

下面是index.html中的片段

<multi-color-bar-chart 
 
    title="Annual" 
 
    value1="45.5" 
 
    value2="22.3" 
 
    value3="32.2" 
 
    v1bg="#ff0000"> 
 
    ... 
 
    ... 
 
</multi-color-bar-chart>

我通過v1bg屬性傳遞一個十六進制代碼#ff0000我打算更換實際元素內的屬性。

我還不知道是否有解決的辦法。可能已經使用document.querySelector()但尚未嘗試。如果有一種直接的HTML方法會很棒。

來源

2015-06-05 Subrata Sarkar

嘗試class$="{{v1bg}}"，因爲這將綁定到class屬性而不是class屬性。

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding

來源

2015-06-05 14:12:26 Zikes

剛注意到href $不像class $那樣工作。我試過...但它不工作。對於背靠背問題抱歉。一個完整的新手聚合物:) –

'href $ =「{{value}}」'應該可以工作，但正如你之前所說的字符串連接不起作用，所以你將無法執行'href $ =「http：/ /example.com/{{值}}「'。不過，您可以做類似的事情：https://www.polymer-project.org/1.0/docs/devguide/properties.html#computed-properties – Zikes

字符串連接在Polymer 1.2中起作用，您應該升級。參見：https：//blog.polymer-project.org/releases/2015/11/02/release-1.2.0/ – Whyser

如何動態設置類名？

回答

相關問題