Введение в Knockout

27
Kerimhanov R. [email protected]

description

Введение в Knockout

Transcript of Введение в Knockout

Page 1: Введение в Knockout

Kerimhanov [email protected]

Page 2: Введение в Knockout

Оглавление:

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

Page 3: Введение в Knockout

KnockoutJs

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

Page 4: Введение в Knockout

MVVM шаблон

ViewView Model

Bindigngs

Commands

Events

Page 5: Введение в Knockout

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

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

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

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

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

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

Page 6: Введение в Knockout

Knockout vs jQuery jQuery/js Frameworks KnockoutJs

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

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

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

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

Page 7: Введение в Knockout

Let’s Bind

Page 8: Введение в Knockout

Observables

Page 9: Введение в Knockout

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

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

Page 10: Введение в Knockout

Computed Observables

Page 11: Введение в Knockout

Bindings

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

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

Page 12: Введение в Knockout

Visible

Page 13: Введение в Knockout

Text

Page 14: Введение в Knockout

Html

Page 15: Введение в Knockout

Style

Page 16: Введение в Knockout

Css

Page 17: Введение в Knockout

Attr

Page 18: Введение в Knockout

Control flow statements• foreach• if• ifnot• with

Page 19: Введение в Knockout

Foreach

Page 20: Введение в Knockout

If

Ifnot

Page 21: Введение в Knockout

With

Page 22: Введение в Knockout

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

Page 23: Введение в Knockout

Extenders

Page 24: Введение в Knockout

Template binding

• Native templating• String-based templating

Page 25: Введение в Knockout

Native templating

Page 26: Введение в Knockout

String-based templating

Page 27: Введение в Knockout

Knockout performancehttp://www.knockmeout.net/