Upload
dimitar-danailov
View
167
Download
4
Embed Size (px)
Citation preview
ASP.NET MVCDimitar Danailov
Senior Developer at 158ltd.comdimityr.danailov[at]gmail.com
Slideshare.netGithub
YouTubeFounder at VarnaIT
Github Code
Topics Today
● What is MVVM● Why use MVVM● Knockout.js
2005
Photo Credit:http://upload.wikimedia.org/wikipedia/commons/8/87/MVVMPattern.png
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
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
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
Photo Credit:http://s.allacronyms.com/2168932girl.png
Rich - client - side interactivity
What is KnockoutJS
MVVM pattern
Web Browser Support
Observable
Core Observable Types
Observable
Core Observable Types
Computed
Observable Array
Observable
Core Observable Types
Computed
Observable Array
Knockout in 3 steps
<input data-bind="value: code" placeholder="code" />
Declarative Binding
Knockout in 3 stepsvar myViewModel = {
firstName: ko.observable('John')}
Create an Observable
Knockout in 3 stepsko.applyBindings(myViewModel);
Bind the ViewModelto the View
How knockout's observable works
Changes to Source notify targets
How knockout's observable works
Changes to Source notify targets
Changes to targets Notify Source
How knockout's observable works
Changes to Source notify targets
Changes to targets Notify Source
Two - Way Data Binding
How knockout's observable works
Changes to Source notify targets
Changes to targets Notify Source
Two - Way Data Binding Event Binding
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”
QuestionsDimitar Danailov
Senior Developer at 158ltd.comdimityr.danailov[at]gmail.com
Slideshare.netGithub
YouTubeFounder at VarnaIT
Github Code