Введение в MVVM на примере Knockout для JavaScript разработчиков

1. Введение в MVVM на примере
Knockout для JavaScript разработчиков
Докладчик:
Андрей Найденко
.NET разработчик
twitter: Andrii_Naidenko
facebook: Andrii.Naidenko

2. Knockout – бесплатная JavaScript
библиотека с открытым кодом для
разработки богатых веб-приложений
с отзывчивым интерфейсом и
прозрачной моделью данных.

4. $('#left-handle-position').change(function (e)
{
var rightValue = $('.slider-range').slider('values', 1);
var newLeftValue = Math.min($(this).val(), rightValue);
$sliderRange.slider('values', 0, $(this).val());
});
$('#right-handle-position').change(function (e)
{
var leftValue = $('.slider-range').slider('values', 0);
var newRightValue = Math.max($(this).val(), leftValue);
$sliderRange.slider('values', 1, newRightValue);
$('.slider-range').slider({ });
range: true,
slide: function (event, ui)
{
$('#left-handle-position').val(ui.values[0]);
$sliderValues.find('.left-handle-value').text(ui.values[0]);
var $statistics = $('.statistics');
$statistics.find('.min').text(MyMath.min(values, sliderValues));
$statistics.find('.median').text(MyMath.median(values, sliderValues));
// ...
}
});

6. Верстальщик
(недоумевает,
девелопер ломает
Программист Тестировщик верстку)
(устал, безнадежно (утомленный, скучает,
фиксает баги, ждет фиксов)
и днем, и ночью)
Менеджер Заказчик
(думает, что делать и кто виноват) (недоволен качеством)

7. var ViewModel = function (chartData)
{
this.dataValues = ko.observableArray(chartData);
this.leftHandleValue = ko.observable(0);
this.rightHandleValue = ko.observable(chartData.length - 1);
this.sliderRangeSelected = ko.computed(function () {
return [this.leftHandleValue(), this.rightHandleValue()];
}, this);
this.min = ko.computed(function () {
return MyMath.min(this.dataValues(), this.sliderRangeSelected());
}, this);
this.median = ko.computed(function () {
var chartData = loadChartData(); return MyMath.median(this.dataValues(), this.sliderRangeSelected());
var viewModel = new ViewModel(chartData); }, this);
ko.applyBindings(viewModel);
};
<div class="slider-range" data-bind="jqueryui: { widget: 'slider', options: { values: this.sliderRangeSelected() }}"></div>
<div>Min: <span class="min" data-bind="text: min"></span></div>
<div>Max: <span class="max" data-bind="text: max"></span></div>

9. Ключевые концепции
Декларативная привязка Автоматическое обновление UI
Ассоциация DOM элементов При изменении view модели,
с view моделью в разметке UI обновляется автоматически,
и наоборот
Отслеживание зависимостей Шаблонизация
Автоматически отслеживает цепочки Позволяет строить богатый интерфейс с
зависимостей во view модели использованием шаблонов,
отслеживает вложенные шаблоны

10. Встроенные привязки
(bindings):
Декларативная
привязка •Управления текстом и внешним видом:
visible, text, html, css, style, attr
•Управления логикой представления:
foreach, if, ifnot, with
•Работы с полями формы:
click, event, submit, enable, disable, value, hasfocus, checked,
options, selectedOptions, uniqueName

11. Шаблон MVVM (Model-View-ViewModel)
View: интерактивный UI, основанный на view модели.
View Model: плоский объект, представляющий данные и операции на UI.
Например, для реализации редактора списка, Ваша view модель будет
представлена объектом со списком элементов и методов по их
добавлению/удалению в список.
Model: . Прикладная логика, которая описывает объекты предметной области и
операции над ними. Модель не зависит от UI.

12. Особенности
• Бесплатный, с открытыми исходниками
MIT лицензия
• Чистый JavaScript
Работает с любым веб-фреймворком
• Легковесный
39кб сжатая, 13кб с HTTP сжатием
• Нет зависимостей
• Поддерживает все мейнстрим браузеры:
IE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile)
• Полная документация:
API, живые примеры, интерактивные учебники

13. Преимущества:
-Полная автономность
-Автоматическое отслеживание зависимостей,
обновление UI
-Прозрачная архитектура
-Повышенная тестируемость
-Очень низкий порог вхождения
Недостатки:
-Нет поддержки SEO

14. Домашняя страница:
http://knockoutjs.com/
Исходный код:
https://github.com/SteveSanderson/knockout
Ресурсы:
http://www.knockmeout.net/
http://blog.stevesanderson.com
http://groups.google.com/group/knockoutjs
http://en.wikipedia.org/wiki/Model_View_ViewMode
l