9

我从我的最后一个问题中了解到 0.9 及更高版本不允许字符串连接(目前我正在迁移到 1.0 版)。

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

但是,有时我需要使用hreforclass属性来动态分配值。我不能让它像下面这样直接工作:

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

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

我还不知道是否有解决方法。可能已经用过document.querySelector(),但还没有尝试过。如果有一个直接的 HTML 方法那就太好了。

4

1 回答 1

18

尝试class$="{{v1bg}}",因为这将绑定到class属性而不是class属性。

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

于 2015-06-05T14:12:26.820 回答