Введение в MVVM на примереKnockout для JavaScript разработчиков               Докладчик:               Андрей Найденко    ...
Knockout – бесплатная JavaScriptбиблиотека с открытым кодом дляразработки богатых веб-приложенийс отзывчивым интерфейсом и...
$(#left-handle-position).change(function (e)                                                           {                  ...
Верстальщик                                                                                                (недоумевает,  ...
var ViewModel = function (chartData)                                                        {                             ...
Ключевые концепции    Декларативная привязка            Автоматическое обновление UI    Ассоциация DOM элементов          ...
Встроенные привязки                (bindings):Декларативная  привязка      •Управления текстом и внешним видом:           ...
Шаблон MVVM (Model-View-ViewModel)View: интерактивный UI, основанный на view модели.View Model: плоский объект, представля...
Особенности• Бесплатный, с открытыми исходниками  MIT лицензия• Чистый JavaScript  Работает с любым веб-фреймворком• Легко...
Преимущества:-Полная автономность-Автоматическое отслеживание зависимостей,обновление UI-Прозрачная архитектура-Повышенная...
Домашняя страница:http://knockoutjs.com/Исходный код:https://github.com/SteveSanderson/knockoutРесурсы:http://www.knockmeo...
Introduction to KnockoutJs
Introduction to KnockoutJs
Introduction to KnockoutJs
Upcoming SlideShare
Loading in …5
×

Introduction to KnockoutJs

948 views
882 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
948
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to KnockoutJs

  1. 1. Введение в MVVM на примереKnockout для JavaScript разработчиков Докладчик: Андрей Найденко .NET разработчик twitter: Andrii_Naidenko facebook: Andrii.Naidenko
  2. 2. Knockout – бесплатная JavaScriptбиблиотека с открытым кодом дляразработки богатых веб-приложенийс отзывчивым интерфейсом ипрозрачной моделью данных.
  3. 3. $(#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)); // ... }});
  4. 4. Верстальщик (недоумевает, девелопер ломаетПрограммист Тестировщик верстку)(устал, безнадежно (утомленный, скучает, фиксает баги, ждет фиксов) и днем, и ночью) Менеджер Заказчик (думает, что делать и кто виноват) (недоволен качеством)
  5. 5. 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>
  6. 6. Ключевые концепции Декларативная привязка Автоматическое обновление UI Ассоциация DOM элементов При изменении view модели, с view моделью в разметке UI обновляется автоматически, и наоборот Отслеживание зависимостей Шаблонизация Автоматически отслеживает цепочки Позволяет строить богатый интерфейс с зависимостей во view модели использованием шаблонов, отслеживает вложенные шаблоны
  7. 7. Встроенные привязки (bindings):Декларативная привязка •Управления текстом и внешним видом: visible, text, html, css, style, attr •Управления логикой представления: foreach, if, ifnot, with •Работы с полями формы: click, event, submit, enable, disable, value, hasfocus, checked, options, selectedOptions, uniqueName
  8. 8. Шаблон MVVM (Model-View-ViewModel)View: интерактивный UI, основанный на view модели.View Model: плоский объект, представляющий данные и операции на UI.Например, для реализации редактора списка, Ваша view модель будетпредставлена объектом со списком элементов и методов по ихдобавлению/удалению в список.Model: . Прикладная логика, которая описывает объекты предметной области иоперации над ними. Модель не зависит от UI.
  9. 9. Особенности• Бесплатный, с открытыми исходниками MIT лицензия• Чистый JavaScript Работает с любым веб-фреймворком• Легковесный 39кб сжатая, 13кб с HTTP сжатием• Нет зависимостей• Поддерживает все мейнстрим браузеры: IE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile)• Полная документация: API, живые примеры, интерактивные учебники
  10. 10. Преимущества:-Полная автономность-Автоматическое отслеживание зависимостей,обновление UI-Прозрачная архитектура-Повышенная тестируемость-Очень низкий порог вхожденияНедостатки:-Нет поддержки SEO
  11. 11. Домашняя страница:http://knockoutjs.com/Исходный код:https://github.com/SteveSanderson/knockoutРесурсы:http://www.knockmeout.net/http://blog.stevesanderson.comhttp://groups.google.com/group/knockoutjshttp://en.wikipedia.org/wiki/Model_View_ViewModel

×