Взаимодействие с сервером
Knockout не включает какие-либо функции по взаимодействию с сервером, отправки запросов и т.п. В основном подобные задачи ложатся на имеющиеся библиотеки типа jQuery, которая имеет весь необходимый для этого функционал. Собственно на примере использования функций jQuery мы и рассмотрим отправку и получение данных с сервера.
Сериализация объектов
Формат JSON является на сегодняшний день наиболее распространенной формой передачи данных между сервером и клиентом. И прежде чем отправлять некоторые данные на сервер, их надо сериализовать в JSON.
ViewModel, с которой мы работаем в Knockout, по сути представляет стандартный объект JavaScript, поэтому его можно легко сериализовать в
JSON с помощью встроенной в JS функции JSON.stringify. Однако, как правило, внутри себя ViewModel содержит не только обычные объекты, но и
наблюдаемые объекты или observables, computed observables, observable arrays, для которых нужно произвести некоторую дополнительную работу, чтобы их корректно
сериализовать в json.
Для облегчения сериализации наблюдаемых объектов Knockout предоставляет две специальные функции:
ko.toJS: создает объектный граф модели, заменяя все наблюдаемые объекты observable их текущими значениями
ko.toJSON: создает строковое представление ViewModel в формате JSON. В своей внутренней реализации эта функция вызывает
ko.toJS(), а затем для полученного объекта использует встроенный сериализатор JSON (например, функциюJSON.stringify())
<!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>
<form data-bind="submit: submitHandler">
<input type="text" name="login" data-bind="textInput: login" />
<input type="text" name="password" data-bind="textInput: password" />
<button type="submit">Отправить</button>
</form>
<p data-bind="text: ko.toJSON($root)"></p>
<script type="text/javascript">
function AppViewModel(){
self=this;
self.login= ko.observable("login");
self.password= ko.observable("password");
self.submitHandler = function() {
console.log(ko.toJS(self));
};
};
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
- Глава 1. Введение в KnockoutJS
- Глава 2. Основы привязки
- Глава 3. Работа с формами
- Глава 4. Взаимодействие с сервером