如何從顏色數組動態更改Polymer 1.0紙按鈕顏色？

Question

我有一個數組buttonColors，它具有十六進制格式的顏色集。 現在，我想顯示一組紙質按鈕，每個按鈕都具有buttonColors Array中存在的顏色。 如何在聚合物1.0中實現它？

 <template is="dom-repeat" items="{{buttonColors}}"> <paper-button style="background-color:{{item}}" > <b>click me</b> </paper-button> </template> 

上面的代碼段似乎無效。 請幫助。

Answer 1

您需要創建一個函數並按以下方式調用它

 <template is="dom-repeat" items="{{buttonColors}}"> <paper-button style="{{computeStyle(item)}}" > <b>click me</b> </paper-button> </template> <script> computedStyle:function(cl) { var s= "background-color:"+cl; return s; } </script> 

Answer 2

ebidel的評論一如既往地出色。 （他是負責建立Polymer BTW的Google天才之一）

1.0不支持 {{}} 綁定中的 表達式 。 您需要將其設置為計算屬性： style="{{_computeStyle(item)}}" ... 文檔

下面，我寫了一些示例代碼供您遵循。

---

范例程式碼

<dom-module id="x-element">
  <template is="dom-repeat" items="{{buttonColors}}">
    <paper-button style$="{{_computeStyle}}"> <b>click me</b> </paper-button>
  </template> ...
  <script>
    (function() {
      Polymer({
        is: "x-element",
        properties: {
          value: {
            type: Number,
            notify: true
          }
        },
        _computeStyle: function(item) {
          // Compute style here
          return "background-color:red";
        }
      });
    })()
  </script>
</dom-module>