Формы привязки
В KnockoutJS есть несколько различных форм привязки:
text: привязка к текстовому содержимому элемента html
html: привязка к html-коду элемента
visible: устанавливает видимость привязанного элемента html
css: добавляет или удаляет классы CSS для привязанного элемента html
style: устанавливает привязку к стилю элемента
attr: позволяет установить значения определенных атрибутов элемента
Привязка к тексту
Для привязки к текстовому содержимому в атрибуте data-bind применяется параметр text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Привязка данных в KnockoutJS</title>
</head>
<body>
<h1 data-bind="text: message"></h1>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js"></script>
<script>
var viewModel ={
message: "Привет KnockoutJS!"
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
Содержимое свойства message передается в элемент заголовка h1 в виде простого текста:
Привязка к html
Для привязке к коду html применяется параметр html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Привязка данных в KnockoutJS</title>
</head>
<body>
<h1 data-bind="html: message"></h1>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js"></script>
<script>
var viewModel ={
message: "<span style='color:red;'>Привет KnockoutJS!</span>"
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
Привязка visible
Привязка visible управляет видимостью элемента: может отображать, а может скрывать элемент:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Привязка в KnockoutJS</title>
</head>
<body>
<div data-bind="visible: display">
Скрываемый блок
</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>
В данном случае с помощью кнопки мы сможем переключать видимость блока на веб-странице.
Привязка к css
css-привязка позволяет добавлять или удалять классы для элемента.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Привязка в KnockoutJS</title>
<style>
.redStyle{
color: red;
}
</style>
</head>
<body>
<div data-bind="css: { redStyle: isStyled }">
Стилизованный блок
</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 = {
isStyled: ko.observable(true)
};
ko.applyBindings(viewModel);
var displayBtn = document.getElementById("displayBtn");
displayBtn.addEventListener("click", function (e) {
if(viewModel.isStyled()==true)
viewModel.isStyled(false);
else
viewModel.isStyled(true);
});
</script>
</body>
</html>
Определение привязки data-bind="css: { redStyle: isStyled }" означает, что если выражение isStyled равно true, тогда к элементу
добавляется класс redStyle. Иначе он не добавляется или удаляется при наличии.
А с помощью кнопки в данном случае можно переключить значение свойства isStyled и тем самым переключить класс.
Привязка стилей
Привязка стилей позволяет добавить или удалить у элемента определенные стили.
<div data-bind="style: { color: colorModel }">
Стилизованный блок
</div>
<button id="displayBtn">Переключить стиль</button>
<script>
var viewModel = {
colorModel: ko.observable("red")
};
ko.applyBindings(viewModel);
var displayBtn = document.getElementById("displayBtn");
displayBtn.addEventListener("click", function (e) {
if(viewModel.colorModel()=="red")
viewModel.colorModel("blue");
else
viewModel.colorModel("red");
});
</script>
Здесь свойство colorModel устанавливает цвет шрифта, а с помощью кнопки можно переключить его значение.
При использовании свойств CSS, который имеют в своем названии дефис, следует удалять дефис, а вторую половину названия свойства, которая шла после дефиса,
начинать с заглавной буквы. Например, установка стиля для фона элемента, то есть для свойства background-color:
<div data-bind="style: { backgroundColor: colorModel }">
Привязка атрибутов
С помощью параметра attr можно выполнить привязку к атрибутам элемента:
<a data-bind="attr: { href: url, title: description }">Главная</a>
<script>
var viewModel = {
url: ko.observable("index.html"),
description: ko.observable("Перейти на главную страницу")
};
ko.applyBindings(viewModel);
Параметру attr передается набор атрибутов и их значения из ViewModel.
- Глава 1. Введение в KnockoutJS
- Глава 2. Основы привязки
- Глава 3. Работа с формами
- Глава 4. Взаимодействие с сервером