Полимер 1.0 - Связывание классов css

Я пытаюсь включить классы на основе параметров json, поэтому, если у меня есть цвет свойства, $= делает трюк передачей его как атрибута класса (на основе полимера )

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

Проблема заключается в том, что я пытаюсь добавить этот класс по существующему набору классов, например:

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

В этом случае $= не делает трюк. Есть ли способ выполнить это или каждый раз, когда я добавляю класс условно, мне нужно включить остальные стили с помощью селекторов css вместо классов? Я знаю, что в этом примере, возможно, цвет может просто перейти в атрибут стиля, это просто пример, иллюстрирующий проблему.

Обратите внимание, что это проблема только в Polymer 1.0.

Ответ 1

Как и в случае с Polymer 1.0, интерполяция строк еще не поддерживается (это будет скоро указано в дорожной карте). Однако вы также можете сделать это с помощью вычисленных привязок. Пример

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

Edit:

Как и в случае с полимером 1.2, вы можете использовать соединение. Итак,

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

теперь работает.

Ответ 2

Update

Начиная с Polymer 1.2.0, теперь вы можете использовать Compound Bindings для

объединить строковые литералы и привязки в единственном связывании свойств или привязке текстового содержимого

так:

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

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

и ваш пример

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

, поэтому это уже не проблема.

Ниже приведен ответ только для версий полимера до 1.2

Если вы делаете это много, пока эта функция не станет доступной, которая, надеюсь, скоро, вы можете просто определить функцию в одном месте как свойство Polymer.Base, который обладает всеми свойствами, унаследованными всеми полимерными элементами

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

то, когда он вводится полимерами правильно, просто удалите эту одну строку и замените

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

с

avatar {{color}}

Я использую это много в данный момент, а не только для объединения классов в один, но также и таких, как имена путей, присоединения к "/" и просто общего текстового содержимого, поэтому вместо этого я использую первый аргумент как клей.

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

или если вы можете использовать функции 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>

Ответ 3

        <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 : "");
    },