Введение в Knockout

1. Kerimhanov R.
rkerimhanov@codemastersintl.com

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

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

4. MVVM шаблон
Bindigngs
View
Commands
Events
View
Model

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

6. Knockout vs jQuery
jQuery/js Frameworks
• Предоставляет обертку для
работы с DOM
• Достаточно низкий уровень для
работы с элементами и
событиями на странице
KnockoutJs
• Обеспечивает высокоуровневый
доступ для управления моделью
данных и ее отображением на
странице
P.s. И jQuery и KnockoutJs могут быть использованы в одном месте, что бы достичь максимальной эффективности

7. Let’s Bind

8. Observables

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

10. Computed Observables

11. Bindings
Допустимые типы:
•
•
•
•
•
•
Visible
Html
Text
Style
Css
Attr

12. Visible

13. Text

14. Html

15. Style

16. Css

17. Attr

18. Control flow statements
•
•
•
•
foreach
if
ifnot
with

19. Foreach

20. If
Ifnot

21. With

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

23. Extenders

24. Template binding
• Native templating
• String-based templating

25. Native templating

26. String-based templating

27. Knockout performance
http://www.knockmeout.net/