Использование двух style.bind в Aurelia - PullRequest
Новая
       27

Использование двух style.bind в Aurelia

0 голосов
/ 21 мая 2018

Я пытаюсь использовать два style.bind в Аурелии, но это не работает.Я также мог бы использовать только один style.bind и применять стили, которые я хочу, но я не знаю, как это сделать.

Это фрагмент кода: 

<span repeat.for="source of item.data.sources | sort: 'weight' : 'asc'" 
  if.bind="source.weight" 
  class="weight" 
  style.bind="source.weight | fontWeight" 
  style.bind="source.is_italic && 'font-style: italic;'"
>
  ${source.name}
</span>

единственное, что мой fontWeight valueConverter делает, это возвращает font-weight в синтаксисе CSS: 

export class FontWeightValueConverter {
  toView(weight) {
    return 'font-weight: ' + weight;
  }
}

Я должен сделать это так, потому что выполнение 

style="font-weight: ${ source.weight }"

не работает... может быть, потому что weight является зарезервированным словом?

Итак, в общем, я хочу добиться установки font-weight с моим значением source.weight и затем установки font-style: italic;если флаг is_italic истинен.

Есть идеи?

1 Ответ

0 голосов
/ 21 мая 2018

Для этого вы можете использовать атрибут css.Вы можете ввести строковые интерполированные стили в значение атрибута css, который позволяет вам создать необходимое поведение.

В вашем случае вам понадобится что-то вроде этого: 

<span repeat.for="source of item.data.sources | sort: 'weight' : 'asc'" 
  if.bind="source.weight" 
  class="weight" 
  css="font-weight: ${source.weight}; ${source.is_italic ? 'font-style: italic;' : ''}"
>
  ${source.name}
</span>

Если вы хотите узнать больше о привязке стилей, я рекомендую эту статью .

...