web-dev-qa-db-ja.com

クラス名を動的に設定するにはどうすればよいですか？

前回の質問から理解しました ここ 文字列の連結は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>_

_#ff0000_属性を介して16進コード_v1bg_を渡します。これは、要素内のプロパティを実際に置き換える予定です。

回避策があるかどうかはまだわかりません。 document.querySelector()を使用した可能性がありますが、まだ試していません。直接的なHTMLアプローチがあれば、それは素晴らしいことです。

polymerpolymer-1.0
9
Subrata Sarkar

class$="{{v1bg}}"を試してください。これは、classプロパティではなくclass属性にバインドされます。

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

18
Zikes