Привязка if позволяет скрыть, либо, наоборот, отобразить какой-то определенный элемент веб-страницы. Во многом она аналогична привязке visible:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Привязка массивов в KnockoutJS</title>
</head>
<body>
<div data-bind="if: display">
if-binding
</div>
<button id="displayBtn">Скрыть/Отобразить</button>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js"></script>
<script>
var viewModel = {
display: ko.observable(true)
};
ko.applyBindings(viewModel);
var displayBtn = document.getElementById("displayBtn");
displayBtn.addEventListener("click", function (e) {
if(viewModel.display()==true)
viewModel.display(false);
else
viewModel.display(true);
});
</script>
</body>
</html>
При опреелении привязки после ключевого слова if идет выражение. Если это выражение возвращает значение true,
то элемент, к которому применяется привязка, отобразается. Иначе элемент скрывается.
data-bind="if: display"
Данный тип привязки также можно задать с помощью комментарных форм:
<!-- ko if: display -->
<p>if-binding</p>
<!-- /ko -->
Комментарии <!-- ko --> и <!-- /ko --> выполняют роль соответственно начального и конечного маркера,
которые определяют "виртуальный элемент". Knockout также обрабатывает этот виртуальный элемент и выполняет к нему привязку также, как и к реальному элементу веб-страницы.
Привязка ifnot работает аналогичным образом только в обратную сторону: если выражение привязки возвращает значение false,
тогда привязанный элемент отображается. Например:
<div data-bind="ifnot: display"> Привязка ifnot </div>