KnockoutJS and MVVM@d_danailov

ASP.NET MVCDimitar Danailov

Senior Developer at 158ltd.comdimityr.danailov[at]gmail.com

Slideshare.netGithub

YouTubeFounder at VarnaIT

Github Code

http://beehive.bg/

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”

https://www.facebook.com/groups/asp.netmvcframework/

QuestionsDimitar Danailov

Senior Developer at 158ltd.comdimityr.danailov[at]gmail.com

Slideshare.netGithub

YouTubeFounder at VarnaIT

Github Code