Привязка checked
Привязка checked предназначена для работы с элементами input с типом checkbox и radio, которые могут пребывать в отмеченном или неотмеченном состоянии.
Фактически создается привязка к атрибуту checked.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Привязка в KnockoutJS</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js"></script>
</head>
<body>
<p><input type="checkbox" data-bind="checked: isVisible" /><span>Видимый</span></p>
<div data-bind="visible: isVisible">
Скрываемый блок
</div>
<script type="text/javascript">
var viewModel = {
isVisible: ko.observable(true)
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
Для параметра checked надо передать объект, который представляет логическое значение false или true.
Это логическое значение будет указывать, отмечен ли флажок или нет. И как раз таким объектом в нашем случае является свойство isVisible.
В итоге устанавливая или снимая отметку в поле, мы можем управлять атрибутом checked и тем самым значением свойства isVisible. А так как isVisible также привязан к блоку div и устанавливает видимость этого блока, то через установку отметки флажка мы можем влиять на видимость этого блока:
Создание набора флажков:
<ul data-bind="foreach: { data: phones, as: 'phone'}">
<li>
<input type="checkbox" data-bind="checked: phone.isAvailable" />
<span data-bind="text: phone.model"></span>
</li>
</ul>
<script type="text/javascript">
function Phone(model, available){
this.model = model;
this.isAvailable = available;
}
var viewModel = {
phones: ko.observableArray([
new Phone("iPhone SE", true),
new Phone("Lumia 950", false),
new Phone("Zenfone 3", true),
new Phone("Xiaomi Mi5", false)
])
};
ko.applyBindings(viewModel);
</script>
Немного иначе происходит работа с радиокнопками:
<div data-bind="foreach: phones">
<p>
<input type="radio" name="phone" data-bind="checkedValue: $data, checked: $root.isSelected" />
<span data-bind="text: $data"></span>
</p>
</div>
<script type="text/javascript">
function Phone(model, selected){
this.model = model;
}
var viewModel = {
phones: ko.observableArray(["iPhone SE", "Lumia 950", "Zenfone 3", "Xiaomi Mi5"]),
isSelected: ko.observable("Lumia 950")
};
ko.applyBindings(viewModel);
</script>
Здесь выражение привязки выглядит следующим образом:
data-bind="checkedValue: $data, checked: $root.isSelected"
Параметр checkedValue указывает на объект, который будет применяться для атрибута value. То есть так как перебираемый массив
представляет практически массив строк, то каждая строка будет передаваться через объект $data и будет представлять значение для атрибута
value.
Кроме того, для параметра checked в качестве значения устанавливается объект, который соответствует значению атрибута value.
То есть здесь в качестве такого объекта используется isSelected, который соответствует второму элементу массива. Ну и так как при переборе массива
каждый элемент input в качестве контекста принимает перебираемый объект, то нам надо использовать ключевое слово $root для обращения к свойству в родительском контексте: $root.isSelected
В итоге второй элемент будет выбран по умолчанию:
- Глава 1. Введение в KnockoutJS
- Глава 2. Основы привязки
- Глава 3. Работа с формами
- Глава 4. Взаимодействие с сервером