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

Назначение

Биндинг visible заставляет скрыть или показать связанный DOM элемент в соответствии с переданным в биндинг значением.

Пример

<div data-bind="visible: shouldShowMessage">
    Вы увидите это сообщение только, когда "shouldShowMessage" имеет значение true.
</div>

<script type="text/javascript">
    var viewModel = {
        shouldShowMessage: ko.observable(true) // Изначально сообщение отображается
    };
    viewModel.shouldShowMessage(false); // ... теперь оно скрыто
    viewModel.shouldShowMessage(true); // ... теперь снова отображается
</script>

Параметры

• Основной параметр
  • Когда параметр вычисляется, как false-подобное значение (например, булево значение false, или цифра 0, или null, или undefined), биндинг устанавливает значение вашЭлемент.style.display на none, тем самым скрывая его. Это имеет приоритет над любым стилем для display свойства, объявленным, используя CSS.
  • Когда параметр вычисляется, как true-подобное значение (например, булево значение true, или не-null объект или массив), биндинг уберет значение из вашЭлемент.style.display, делая элемент видимым.Обратите внимание, что будет применено любое свойство для display, которое вы настроили в CSS правилах (таким образом, CSS правило вроде x { display:table-row } отлично работает в сочетании с данным биндингом).

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

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

Примечание: Использования функций и выражений для контроля отображения элемента

Вы так же можете использовать JavaScript функцию или произвольное JavaScript выражение в качестве значения параметра биндинга. Если их использовать, KO запустит вашу функцию/вычислит выражение, и будет использовать полученный результат для определения, спрятать ли элемент.

Например,

<div data-bind="visible: myValues().length > 0">
    Вы увидите это сообщение только, когда 'myValues' будет иметь хотя бы один элемент.
</div>
 
<script type="text/javascript">
    var viewModel = {
        myValues: ko.observableArray([]) // Изначально пустой, поэтому сообщение скрыто
     };
     viewModel.myValues.push("некоторое значение"); // Теперь отображается
</script>

Зависимости

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

---

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

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

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