web-dev-qa-db-ja.com

Polymer 1.0-cssクラスのバインド

私はjsonのパラメータに基づいてクラスを含めようとしているので、プロパティの色がある場合、$ =はクラス属性として渡すトリックを作ります（polymer- ドキュメント ）

<div class$="{{color}}"></div>

問題は、たとえば、既存のクラスセットに沿ってそのクラスを追加しようとしているときです。

<div class$="avatar {{color}}"></div>

その場合、$ =はトリックを行いません。これを達成する方法はありますか、または条件付きでクラスを追加するたびに、クラスの代わりにCSSセレクターを介して残りのスタイルを含める必要がありますか？この例では、色はスタイル属性に単純に入れることができますが、これは純粋に問題を説明するための例です。

これは、Polymer 1.0。

polymerpolymer-1.0
21
fray88

Polymer 1.0、文字列補間はまだサポートされていません（ロードマップに記載されているようにすぐになります）。ただし、計算されたバインディングでこれを行うこともできます。

<dom-module>
  <template>
    <div class$="{{classColor(color)}}"></div>
  </template>
</dom-module>
<script>
  Polymer({
    ...
    classColor: function(color) {
      return 'avatar '+color;
    }
  });
<script>

編集：

Polymer 1.2の時点で、複合バインディングを使用できます。

<div class$="avatar {{color}}"></div>

動作するようになりました。

34
Neil John Ramal

更新

Polymer 1.2. 以降、 Compound Bindings を使用して、

単一のプロパティバインディングまたはテキストコンテンツバインディングで文字列リテラルとバインディングを組み合わせる

そのようです：

<img src$="https://www.example.com/profiles/{{userId}}.jpg">

<span>Name: {{lastname}}, {{firstname}}</span>

あなたの例

<div class$="avatar {{color}}"></div>

したがって、これはもはや問題ではありません。

以下の回答は、polymer 1.2より前のバージョンのみに関連しています。

多くの場合、この機能が利用可能になるまで soon を使用して、1つの場所で Polymer.Base のプロパティとして関数を定義できます。すべてのpolymer要素によって継承されたプロパティの

//TODO remove this later then polymer has better template and binding features.
// make sure to find all instances of {{join( in polymer templates to fix them
Polymer.Base.join = function() { return [].join.call(arguments, '');}

そして次のように呼び出します：

<div class$="{{join('avatar', ' ', color)}}"></div>

次に、polymerによって適切に導入されたら、その1行を削除し、置き換えます

{{join('avatar', color)}}

と

avatar {{color}}

現時点では、クラスを1つに結合するためだけでなく、パス名、「/」で結合すること、および一般的なテキストコンテンツなどのために、これを頻繁に使用するため、代わりに最初の引数を接着剤として使用します。

Polymer.Base.join = function() {
    var glue = arguments[0];
    var strings = [].slice.call(arguments, 1);
    return [].join.call(strings, glue);
}

または rest arguments のようなes6機能を使用できる場合

Polymer.base.join = (glue, ...strings) => strings.join(glue);

ようなことをするために

<div class$="{{join(' ', 'avatar', color)}}"></div>
<img src="{{join('/', path, to, image.jpg)}}">
<span>{{join(' ', 'hi', name)}}</span>

基本の

Polymer.Base.join = (...args) => args.join('');
<div class$="{{join('avatar', ' ', color)}}"></div>
12
Ryan White
        <template if="[[icon_img_src]]" is="dom-if">
            <img class$="{{echo_class(icon_class)}}" src="[[icon_img_src]]">
        </template>

        <span class$="{{echo_class(icon_class, 'center-center horizontal layout letter')}}" hidden="[[icon_img_src]]">[[icon_text]]</span>

        <iron-icon icon="check"></iron-icon>

    </div>
</template>

<script>
Polymer({

    echo_class: function(class_A, class_Z) {
        return class_A + (class_Z ? " " + class_Z : "");
    },
0
linto cheeran