Биндинг «css» — Knockout.js
Назначение
Биндинг css добавляет или удаляет один или более именованных CSS классов к связанному DOM-элементу. Например, это полезно, когда нужно подсветить красным цветом какое-то значение, которое стало отрицательным.
(Примечание: Если вы не хотите применять CSS класс, а хотите вместо этого назначить атрибут style напрямую, то смотрите биндинг style.)
Пример со статичными классами
<div data-bind="css: { profitWarning: currentProfit() < 0 }">
Информация о выгоде
</div>
<script type="text/javascript">
var viewModel = {
currentProfit: ko.observable(150000) // Положительное значение, поэтому изначально класс "profitWarning" не применяется
};
viewModel.currentProfit(-50); // Заставляет применить класс "profitWarning"
</script>Это применит CSS класс profitWarning когда значение переменной currentProfit опуститься ниже нуля, и удалит класс, когда оно выше нуля.
Пример со динамическими классами
<div data-bind="css: profitStatus">
Информация о выгоде
</div>
<script type="text/javascript">
var viewModel = {
currentProfit: ko.observable(150000)
};
// Оценивает на положительное значение, поэтому изначально применит класс "profitPositive"
viewModel.profitStatus = ko.pureComputed(function() {
return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";
}, viewModel);
// Заставляет удалить класс "profitPositive" и добавить "profitWarning"
viewModel.currentProfit(-50);
</script>Это применит CSS класс profitPositive когда значение currentProfit положительное или ноль, в ином случае, добавит класс profitWarning.
Параметры
- Основной параметр
Если вы используете статичные имена CSS классов, то можете передать в качестве параметра JavaScript объект, в котором имена свойств будут являться именами ваших CSS классов, а их значения оцениваются как true или false в зависимости от того, нужно ли добавить данный класс или нет.Вы можете указать множество CSS классов за раз. Например, если ваша модель представления имеет свойство, называемое isSevere,<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">То можно задать даже несколько CSS классов на основе того же условия, обернув их имена в кавычки, как здесь:<div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">Небулевые значения, интерпретируются как булевые. Например, 0 или null рассматриваются как false, в то время, как 21 и не-null объекты рассматриваются как true.
Если ваш параметр ссылается на observable значение, биндинг будет добавлять или удалять CSS класс, когда observable значение изменится. Если параметр не ссылается на observable значение, то он добавит или удалит класс единожды и не будет обновляться в будущем.
Если хотите использовать динамические имена CSS классов, то можете передать строку, которая соответствует CSS классу или классам, которые хотите добавить элементу. Если параметр ссылается на observable значение, то биндинг будет удалять любые добавленные до этого классы и добавлять класс или классы в соответствием с новым значением observable перменной.
Как и обычно, вы можете использовать произвольные JavaScript выражения или функции в качестве значения параметра. KO выполнит их и будет использовать результирующие значения для добавления или удаления соответствующих CSS классов.
- Дополнительные параметры
- Нет
Примечание: Применение CSS классов, чьи имена нарушают ограничения имен переменных в JavaScript
Если вы хотите применить CSS класс my-class, вы не можете писать так:
<div data-bind="css: { my-class: someValue }">...</div>
… потому что my-class не является допустимым идентификатором в данном месте. Решение простое: оберните имя идентификатора в кавычки, таким образом оно станет строковым литералом so that it becomes a string literal, which is legal in a JavaScript object literal. For example,
<div data-bind="css: { 'my-class': someValue }">...</div>
Зависимости
Нет, кроме ядра библиотеки Knockout.
Эксклюзивно для сайта skv1991.ru
Перепечатка и копирование строго запрещены.