10.01.2018

Биндинг «style» — Knockout.js

Назначение

Биндинг style добавляет или удаляет одно или более значений для стилей DOM-элемента. Это удобно, чтобы например подсветить какое-то значение красным цветом, если оно стало отрицательной величины, или установить ширину прогресс-бара для отображения изменений этого значения.

(Примечание: Если вы не хотите применять стиль явно, но вместо этого хотите присвоить CSS класс, смотрите биндинг css.)

Пример

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
    Информация о выгоде
</div>

<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000) // Положительное значение, поэтому изначально цвет черный
    };
    viewModel.currentProfit(-50); // Заставляет текст DIV элемента стать красного цвета
</script>

Это установит свойство style.color элемента на значение red, когда currentProfit опустится ниже нуля, и значение black, когда станет больше или равно нулю.

 

Параметры

  • Основной параметр
    Вы должны передать JavaScript объект, в котором имена свойств представляют из себя имена стилей, а значения представляют значения для стилей, которые хотите применить к элементу.Можно задать множество значений стилей за раз. Например, если у вашей модели представления есть свойство isSevere,<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }">...</div>Если ваш параметр ссылается на observable значение, то биндинг будет обновлять стили при изменении значения observable-переменной. В ином случае, стили будут применены единожды и не будут обновляться в будущем.

    Как обычно, вы можете использовать произвольные JavaScript выражения или функции в качестве значения параметра. KO выполнит их, и будет использовать полученные значения для применяемых стилей.

  • Дополнительные параметры
    • Нет

Примечание: Применение стилей, чьи имена нарушают ограничения имен переменных в JavaScript

Если вы хотите применить например стили font-weight или text-decoration, или любой другой, чье имя не является корректным идентификатором в JavaScript (например, потому что содержит дефис), то вы должны использовать JavaScript имя для этого стиля. Например,

  • Не пишите { font-weight: someValue }; пишите { fontWeight: someValue }
  • Не пишите { text-decoration: someValue }; пишите { textDecoration: someValue }

Смотрите так же: длинный список имен стилей и их JavaScript эквиваленты (англ.)

Зависимости

Нет, кроме ядра библиотеки Knockout.


Эксклюзивно для сайта skv1991.ru

Перепечатка и копирование строго запрещены.

Оригинал страницы

Опубликовано: 10/01/2018

Добавить комментарий

Ваш адрес email не будет опубликован.