Question

我从上一个问题here中了解到0.9及以上版本不允许使用字符串连接（目前我正在迁移到版本1.0）。

我必须将每个变量都包装在单独的HTML元素中。

但有时我需要动态地为href或class属性分配值。我不能像以下那样直接工作：

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

因为1.0不允许字符串连接！

请参阅下面的摘要。我正在尝试从index.html传递一个属性值，而后者应该替换我的自定义元素中class属性中的值。但它不起作用，我理解为什么。

＆＃13;

<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>

＆＃13;

以下是index.html中的代码段

＆＃13;

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

＆＃13;

我通过#ff0000属性传递十六进制代码v1bg，我打算实际替换元素内的属性。

我还不知道是否有解决方法。可能已使用document.querySelector()但尚未尝试过。如果有一种直接的HTML方法会非常棒。

Answer 1

尝试class$="{{v1bg}}"，因为它会绑定到class属性而不是class属性。

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

如何动态设置类名？

1 个答案: