asp.net mvc - knockoutjs and mvvm
TRANSCRIPT
![Page 2: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/2.jpg)
ASP.NET MVCDimitar Danailov
Senior Developer at 158ltd.comdimityr.danailov[at]gmail.com
Slideshare.netGithub
YouTubeFounder at VarnaIT
Github Code
![Page 4: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/4.jpg)
![Page 5: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/5.jpg)
![Page 6: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/6.jpg)
![Page 7: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/7.jpg)
Topics Today
● What is MVVM● Why use MVVM● Knockout.js
![Page 8: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/8.jpg)
![Page 9: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/9.jpg)
2005
![Page 10: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/10.jpg)
Photo Credit:http://upload.wikimedia.org/wikipedia/commons/8/87/MVVMPattern.png
![Page 11: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/11.jpg)
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
![Page 12: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/12.jpg)
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
![Page 13: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/13.jpg)
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
![Page 14: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/14.jpg)
Photo Credit:http://s.allacronyms.com/2168932girl.png
![Page 15: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/15.jpg)
![Page 16: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/16.jpg)
Rich - client - side interactivity
What is KnockoutJS
MVVM pattern
Web Browser Support
![Page 17: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/17.jpg)
Observable
Core Observable Types
![Page 18: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/18.jpg)
Observable
Core Observable Types
Computed
Observable Array
![Page 19: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/19.jpg)
Observable
Core Observable Types
Computed
Observable Array
![Page 20: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/20.jpg)
Knockout in 3 steps
<input data-bind="value: code" placeholder="code" />
Declarative Binding
![Page 21: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/21.jpg)
Knockout in 3 stepsvar myViewModel = {
firstName: ko.observable('John')}
Create an Observable
![Page 22: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/22.jpg)
Knockout in 3 stepsko.applyBindings(myViewModel);
Bind the ViewModelto the View
![Page 23: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/23.jpg)
How knockout's observable works
Changes to Source notify targets
![Page 24: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/24.jpg)
How knockout's observable works
Changes to Source notify targets
Changes to targets Notify Source
![Page 25: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/25.jpg)
How knockout's observable works
Changes to Source notify targets
Changes to targets Notify Source
Two - Way Data Binding
![Page 26: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/26.jpg)
How knockout's observable works
Changes to Source notify targets
Changes to targets Notify Source
Two - Way Data Binding Event Binding
![Page 27: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/27.jpg)
![Page 28: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/28.jpg)
![Page 29: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/29.jpg)
![Page 30: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/30.jpg)
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”
![Page 32: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/32.jpg)
![Page 33: ASP.NET MVC - Knockoutjs and MVVM](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a92a6d1a28abca768b4951/html5/thumbnails/33.jpg)
QuestionsDimitar Danailov
Senior Developer at 158ltd.comdimityr.danailov[at]gmail.com
Slideshare.netGithub
YouTubeFounder at VarnaIT
Github Code