27
Kerimhanov R. [email protected]

KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Embed Size (px)

DESCRIPTION

Knockout - это JavaScript библиотека, которая помогает в создании насыщенных UI и позволяет разделить модель от ее представления.

Citation preview

Page 1: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Kerimhanov [email protected]

Page 2: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Оглавление:

• KnockoutJs?• MVVP шаблон• Почему knockoutJs?• Основные особенности knockoutJs

Page 3: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

KnockoutJs

KnockoutJs – это JavaScript Framework, который позволяет создавать отзывчивые и динамические UI.Разработчиком этого фреймворка является он

Page 4: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

MVVM шаблон

ViewView Model

Bindigngs

Commands

Events

Page 5: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Ключевые концепции

Декларативная привязка

Автоматическое обновление

Отслеживание зависимостей

Шаблонизация

Следует иметь ввиду, что:• Открытый фреймворк (MIT license)• Написан на чистом JavaScript• Легковесный (46кб сжатая версия и до 16кб при использовании HTTP compression)• Не имеет зависимостей• Поддерживает все основные браузеры и даже IE6+, Firefox 2+ (Desctop and Mobile)• Полностью документирован

Page 6: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Knockout vs jQuery jQuery/js Frameworks KnockoutJs

• Предоставляет обертку для работы с DOM

• Достаточно низкий уровень для работы с элементами и событиями на странице

• Обеспечивает высокоуровневый доступ для управления моделью данных и ее отображением на странице

P.s. И jQuery и KnockoutJs могут быть использованы в одном месте, что бы достичь максимальной эффективности

Page 7: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Let’s Bind

Page 8: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Observables

Page 9: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Явная подписка на изменениеПодписываемся:

Подписываемся и отписываемся:

Page 10: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Computed Observables

Page 11: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Bindings

• Visible• Html• Text• Style• Css• Attr

Допустимые типы:

Page 12: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Visible

Page 13: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Text

Page 14: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Html

Page 15: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Style

Page 16: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Css

Page 17: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Attr

Page 18: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Control flow statements• foreach• if• ifnot• with

Page 19: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Foreach

Page 20: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

If

Ifnot

Page 21: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

With

Page 22: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Form field bindigns• Click• Event• Submit• Enable• Disable• Value• HasFocus• Checked• Options• SelectedOption • UniqueName

Page 23: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Extenders

Page 24: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Template binding

• Native templating• String-based templating

Page 25: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Native templating

Page 26: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

String-based templating

Page 27: KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM

Knockout performancehttp://www.knockmeout.net/