ASP.NET MVC - Knockoutjs and MVVM
0 likes856 views
The document discusses the MVVM (Model-View-ViewModel) pattern and its advantages, including separation of UI, business, and data logic, which facilitates unit testing and UI changes. It also introduces Knockout.js, highlighting its two-way data binding and observables, and provides a brief overview of its implementation steps. The author emphasizes the simplicity and reusability of MVVM as beneficial for developers looking to enhance their applications.
![ASP.NET MVC
Dimitar Danailov
Senior Developer at 158ltd.com
dimityr.danailov[at]gmail.com
Slideshare.net
Github
YouTube
Founder at VarnaIT
Github Code](https://image.slidesharecdn.com/asp-150209125011-conversion-gate01/85/ASP-NET-MVC-Knockoutjs-and-MVVM-2-320.jpg)
![Questions
Dimitar Danailov
Senior Developer at 158ltd.com
dimityr.danailov[at]gmail.com
Slideshare.net
Github
YouTube
Founder at VarnaIT
Github Code](https://image.slidesharecdn.com/asp-150209125011-conversion-gate01/85/ASP-NET-MVC-Knockoutjs-and-MVVM-33-320.jpg)
ASP.NET MVC - Knockoutjs and MVVM
- 2. ASP.NET MVC Dimitar Danailov Senior Developer at 158ltd.com dimityr.danailov[at]gmail.com Slideshare.net Github YouTube Founder at VarnaIT Github Code
- 7. Topics Today ● What is MVVM ● Why use MVVM ● Knockout.js
- 9. 2005
- 11. What is MVVM ● Model - View - ModelView ● Model = Data Class ● View = User Interface ● ViewModel (VM) ○ UI binds to this class ○ VM consumes services of Model ○ VM May expose services/properties of Model
- 12. What is MVVM ● View knows nothing about Model ● Model knows nothing about View ● Model knows nothing about View Model ● View Model knows nothing about View ● Communication from View to VM is via data binding ○ Lists for List Boxes and Grids ○ IsEnabled properties for Buttons ○ Data for Text Boxes
- 13. Why use MVVM ● Separate UI / Business / Data Logic ● Be able to swap out UI ○ Leave business rules/data logic in place ○ ASP.NET to Silverlight ○ WPF to Windows Phone ○ etc. ● Unit testing ● Write less UI code
- 16. Rich - client - side interactivity What is KnockoutJS MVVM pattern Web Browser Support
- 20. Knockout in 3 steps <input data-bind="value: code" placeholder="code" /> Declarative Binding
- 21. Knockout in 3 steps var myViewModel = { firstName: ko.observable('John') } Create an Observable
- 22. Knockout in 3 steps ko.applyBindings(myViewModel); Bind the ViewModel to the View
- 23. How knockout's observable works Changes to Source notify targets
- 24. How knockout's observable works Changes to Source notify targets Changes to targets Notify Source
- 25. How knockout's observable works Changes to Source notify targets Changes to targets Notify Source Two - Way Data Binding
- 26. How knockout's observable works Changes to Source notify targets Changes to targets Notify Source Two - Way Data Binding Event Binding
- 30. MVVM Summary ● MVVM is easy ● Just need an additional class ● Helps to understand the XAML data binding model ● Great for Testing and re-usability ● Don’t worry about being “100% code behind free”
- 33. Questions Dimitar Danailov Senior Developer at 158ltd.com dimityr.danailov[at]gmail.com Slideshare.net Github YouTube Founder at VarnaIT Github Code