Hattan Shobokshi
JavaScript MVVM with
Knockout JS
*Housekeeping
*Stuttering is a communication disorder involving disruptions, or “disfluencies,” in a person’s speech.
*Across all cultures, roughly 1% of people currently has a stuttering disorder.
*http://westutter.org/
Who am I?
Hattan ShobokshiSenior Software Engineer
http://speakerrate.com/hattanhttp://www.slideshare.net/
shobokshi
Goals for this talk
•What is MVVM & Knockout JS ?
•Why Knockout JS?
•Testing JavaScript
•Customization
•Best Practices
•ASP.NET
What is MVVM?• Architectural pattern targeting
rich UI
• Separate Business Logic from UI logic
• Separation of Concerns
• Originally Introduced for WPF and Silverlight
What is Knockout?• Elegant dependency tracking - automatically updates
the right parts of your UI whenever your data model changes
• Declarative bindings - a simple and obvious way to connect parts of your UI to your data model
• Flexible and sophisticated templating - construct a complex dynamic UI easily using arbitrarily nested templates
• Trivially extensible - implement custom behaviors as new declarative bindings for easy reuse in just a few lines of code
Why Knockout?• Isn’t JQuery enough?
• Isn’t JavaScript developer horrible? Tools?
• Community Project
• Easier to Unit Test
• Purely Client side
• Automatic Two way Binding
• Easy to set up via NuGet
Demo
Testing• Test Driven Development• Behavior Driven Development• JASMINE
ASP.NET MVC Integration• Json Model Binding support in MVC3
• Data Bind attribute conversion in MVC3 Helper
• Works with standard MVC binding
• Validation
What did we just talk about?•What is MVVM?
•Why Knockout?•What is Knockout?•ASP.NET MVC Integration•DEMO
Recommended
