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

687 views

Published on

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

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
687
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Kerimhanov R. rkerimhanov@codemastersintl.com
  2. 2. Оглавление: • • • • KnockoutJs? MVVP шаблон Почему knockoutJs? Основные особенности knockoutJs
  3. 3. KnockoutJs KnockoutJs – это JavaScript Framework, который позволяет создавать отзывчивые и динамические UI. Разработчиком этого фреймворка является он
  4. 4. MVVM шаблон Bindigngs View Commands Events View Model
  5. 5. Ключевые концепции Декларативная привязка Автоматическое обновление Отслеживание зависимостей Шаблонизация Следует иметь ввиду, что: • • • • • • Открытый фреймворк (MIT license) Написан на чистом JavaScript Легковесный (46кб сжатая версия и до 16кб при использовании HTTP compression) Не имеет зависимостей Поддерживает все основные браузеры и даже IE6+, Firefox 2+ (Desctop and Mobile) Полностью документирован
  6. 6. Knockout vs jQuery jQuery/js Frameworks • Предоставляет обертку для работы с DOM • Достаточно низкий уровень для работы с элементами и событиями на странице KnockoutJs • Обеспечивает высокоуровневый доступ для управления моделью данных и ее отображением на странице P.s. И jQuery и KnockoutJs могут быть использованы в одном месте, что бы достичь максимальной эффективности
  7. 7. Let’s Bind
  8. 8. Observables
  9. 9. Явная подписка на изменение Подписываемся: Подписываемся и отписываемся:
  10. 10. Computed Observables
  11. 11. Bindings Допустимые типы: • • • • • • Visible Html Text Style Css Attr
  12. 12. Visible
  13. 13. Text
  14. 14. Html
  15. 15. Style
  16. 16. Css
  17. 17. Attr
  18. 18. Control flow statements • • • • foreach if ifnot with
  19. 19. Foreach
  20. 20. If Ifnot
  21. 21. With
  22. 22. Form field bindigns • • • • • • • • • • • Click Event Submit Enable Disable Value HasFocus Checked Options SelectedOption UniqueName
  23. 23. Extenders
  24. 24. Template binding • Native templating • String-based templating
  25. 25. Native templating
  26. 26. String-based templating
  27. 27. Knockout performance http://www.knockmeout.net/

×