Одностраничные веб-приложения (SPA) с библиотекой KnockoutJS

| Суббота, 9 марта, 2013

Метки: ASP.NET MVC, ASP.NET Web API, Entity Framework, Knockout Комментарии: 0

Javascript и Knockout.js на стороне клиента

Посмотрим, что у нас происходит в клиентской части приложения. Одностраничный шаблон использует комбинацию jQuery и Knockout.js для создания правильного интерактивного интерфейса. Библиотека Knockout.js помогает связывать HTML с данными, и реализует паттерн MVVM (Model-View-ViewModel).

• Model – это объекты сервера (элементы и списки to-do).
• View – представление, HTML документ.
• ViewModel – это объект Javascript, в который передаются модели с сервера. Он нужен для связывания с интерфейсом.

Как только в объекте ViewModel изменяются данные, они сразу же синхронизируются с представлением (View). И еще события DOM элементов интерфейса связаны с функциями в ViewModel, которые отправляют AJAX-запросы на сервер.

В одностраничном шаблоне клиентская сторона состоит из трех уровней:

• todo.datacontext.js: AJAX-вызовы.
• todo.models.js: Модели.
• todo.viewmodels.js: Модели представления (ViewModels).

Эти файлы расположены в папке Scripts/app.

todo.datacontext.js реализует все AJAX-запросы к контроллерам Web API. (Кроме запросов авторизации, они находятся в другом файле – ajaxlogin.js)

В файле todo.model.js находятся объявления моделей для списков и элементов to-do. Там два класса: todoItem и todoList.

Большинство свойств моделей имеют тип "ko.observable". Для библиотеки Knockout, это значит, что значения таких свойств отслеживаютcя, и как только происходит изменение значения свойства, то сразу же обновляются связанные с ним HTML-элементы. Например todoItem имеет отслеживаемые свойства title и isDone:

self.title = ko.observable(data.title);
self.isDone = ko.observable(data.isDone);

Также можно подписаться на изменения содержимого свойств. Например, класс todoItem вызывает событие saveChanges после любого изменения значений свойств title и isDone:

saveChanges = function () {
    return datacontext.saveChangedTodoItem(self);
};

// Авто-сохранение после изменения значений свойств
self.isDone.subscribe(saveChanges);
self.title.subscribe(saveChanges);

Связывание данных и элементов HTML

Основная разметка HTML находится в файле Views/Home/Index/cshtml. Так как применяется связывание данных, HTML является просто шаблоном. Knockout реализует декларативное связывание. Элементы на странице связаны с данными при помощи атрибута "data-bind". Приведем простой пример из документации Knockout:

<p>There are <span data-bind="text: myItems().count"></span> items</p>

Здесь Knockout обновляет содержимое элемента span значением myItems.count(). Где бы не изменилось значение, Knockout обновляет HTML сразу.

В Knockout используются разные типы связывания. Ниже приведены связывания, которые применяются в одностраничном шаблоне:

• foreach: Цикл генерирующий однотипную разметку для каждого элемента списка. Используется для списков to-do и элементов to-do. Внутри цикла связывание выполняется к элементам списка.
• visible: Используется для управления видимостью. Скрывает разметку, когда коллекция не содержит элементов или показывает сообщение об ошибке.
• value: Заполняет значениями элементы форм.
• click: Связывает событие щелчка мыши с функцией в модели представления.

Защита от подделки межсайтовых запросов

Подделка межсайтовых запросов (Cross-Site Request Forgery - CSRF) – это вид атаки когда сайт злоумышленников отправляет запросы на ваш сайт, в то время, когда пользователь авторизован на нем. Чтобы предотвратить такие атаки в ASP.NET MVC используются специальные защитные маркеры (anti-forgery tokens), еще их можно назвать проверочные маркеры. Основная идея в том, что на страницу помещается случайным образом сгенерированный маркер и во время отправки данных на сервер этот маркер отправляется вместе с данными.

Проверочные маркеры работают, потому что страница злоумышленников не может прочитать меркеры из-за ограничений происхождения запросов, то есть документ расположенный на другом сайте не может прочитать содержимое документа вашего сайта.

ASP.NET MVC предоставляет встроенную поддержку для защитных маркеров с помощью класса AtniForgery и атрибута [ValidateAntiForgeryuToken]. К сожалению, такой поддержки нет в Web API, но в одностраничном шаблоне есть пользовательская реализация класса ValidateHttpAntiForgeryTokenAttribute, который расположен в папке Filters.