Работа с формами
Привязка value и textInput
Привязка value позволяет установить привязку для атрибута value элемента формы. Данная привязка может применяться в элементах
input, textarea, select.
<!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 data-bind="value: userName" /></p>
<p>Пароль: <input type="password" data-bind="value: userPassword" /></p>
<p>Введенный логин: <span data-bind="text: userName"></span></p>
<script>
function PersonViewModel() {
var self = this;
self.userName = ko.observable("login");
self.userPassword = ko.observable("password");
};
var person = new PersonViewModel();
ko.applyBindings(person);
</script>
</body>
</html>
Привязка к атрибуту value во многом аналогична привязке к текстовому содержимого элемента: после ключевого слова value в качестве параметра идет наблюдаемый объект:
<input data-bind="value: userName" />
Привязка textInput
Привязка textInput связывает текстовое поле (<input>) или элемент textarea со свойствами ViewModel, позволяя синхронно изменять
значение элемента html и значение свойства ViewModel при изменении в одном из них. В отличие от привязки value, textInput позволяет мгновенно обновлять
значения по мере ввода в текстовое поле.
<p>Логин: <input data-bind="textInput: userName" /></p>
<p>Пароль: <input type="password" data-bind="value: userPassword" /></p>
<p>Введенный логин: <span data-bind="text: userName"></span></p>
<script>
function PersonViewModel() {
var self = this;
self.userName = ko.observable("login");
self.userPassword = ko.observable("password");
};
var person = new PersonViewModel();
ko.applyBindings(person);
</script>
Фактически этот тот же самый пример, что и с привязкой value, только теперь элемент span, который также привязан к свойству userName, будет мгновенно отражать изменения свойства ViewModel по мере ввода в текстовое поле.
- Глава 1. Введение в KnockoutJS
- Глава 2. Основы привязки
- Глава 3. Работа с формами
- Глава 4. Взаимодействие с сервером