Биндинг «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
Перепечатка и копирование строго запрещены.