Slide 1
Slide 1 text
Введение в MVVM на примере
Knockout для JavaScript разработчиков
Докладчик:
Андрей Найденко
Senior .NET Software Engineer
в компании EPAM Systems
Twitter: Andrii_Naidenko
Facebook: Andrii.Naidenko
Slide 2
Slide 2 text
Knockout – бесплатная JavaScript
библиотека с открытым кодом для
разработки богатых веб-приложений
с отзывчивым интерфейсом и
прозрачной моделью данных.
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
$('.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));
// ...
}
});
$('#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);
});
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Программист
(устал, безнадежно
фиксает баги,
и днем, и ночью)
Заказчик
(недоволен качеством)
Тестировщик
(утомленный, скучает,
ждет фиксов)
Верстальщик
(недоумевает,
девелопер ломает
верстку)
Менеджер
(думает, что делать и кто виноват)
Slide 7
Slide 7 text
Min:
Max:
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 () {
return MyMath.median(this.dataValues(), this.sliderRangeSelected());
}, this);
};
var chartData = loadChartData();
var viewModel = new ViewModel(chartData);
ko.applyBindings(viewModel);
Slide 8
Slide 8 text
http://code.google.com/p/knockoutjs-presentation-live-example/downloads
Slide 9
Slide 9 text
Ключевые концепции
Декларативная привязка
Ассоциация DOM элементов
с view моделью в разметке
Автоматическое обновление UI
При изменении view модели,
UI обновляется автоматически,
и наоборот
Отслеживание зависимостей
Автоматически отслеживает цепочки
зависимостей во view модели
Шаблонизация
Позволяет строить богатый интерфейс с
использованием шаблонов,
отслеживает вложенные шаблоны
Slide 10
Slide 10 text
Встроенные привязки
(bindings):
• Управления текстом и внешним видом:
visible, text, html, css, style, attr
• Управления логикой представления:
foreach, if, ifnot, with
• Работы с элементами формы:
click, event, submit, enable, disable, value, hasfocus, checked,
options, selectedOptions, uniqueName
Декларативная
привязка
Slide 11
Slide 11 text
Шаблон MVVM (Model-View-ViewModel)
View: интерактивный UI, основанный на view модели.
View Model: плоский объект, представляющий данные и операции на UI. Например,
для реализации редактора списка, Ваша view модель будет представлена объектом
со списком элементов и методов по их добавлению/удалению в список.
Model: Прикладная логика, которая описывает объекты предметной области и
операции над ними. Модель не зависит от UI.
Slide 12
Slide 12 text
Бесплатный, с открытыми исходниками
MIT лицензия
Чистый JavaScript
Работает с любым веб-фреймворком
Легковесный
39кб сжатая, 13кб с HTTP сжатием
Нет зависимостей
Поддерживает все мейнстрим браузеры:
IE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile)
Полная документация:
API, живые примеры, интерактивные учебники
Особенности
Slide 13
Slide 13 text
Преимущества:
- Полная автономность
- Автоматическое отслеживание зависимостей,
обновление UI
- Прозрачная архитектура
- Гибкая расширяемость
- Повышенная тестируемость
- Очень низкий порог вхождения
Недостатки:
- Нет встроенной поддержки отладки зависимостей
- Слабая пользовательских транзакций (есть workaround)
- Нет поддержки SEO
Slide 14
Slide 14 text
Домашняя страница:
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_ViewModel
Материалы презентации:
http://video.yandex.ua/users/andrii-naidenko/view/1/
http://www.slideshare.net/Andrii_Naidenko/introduction-to-knockoutjs
http://code.google.com/p/knockoutjs-presentation-live-example/downloads