Knockoutjs and JQuery

1. KnockoutjsandJQuery Connecticut .NET Developers Group November 13, 2012 The One-Two Punch for Richer MVC 4 Applications

2. Bob Ohlheiser • R. J. Ohlheiser, Inc – West Hartford, CT • Software Engineering & Consulting • rjo@rjosoft.com • Connecticut .NET Developers Group (CTDOTNET) • Co-Leader & community event organizer

3. Objectives • Introduction to knockoutjs library and concepts • Simple demo showing common knockout features applied to traditional MVC app

4. Agenda • What is knockoutjs? • Design & Observable Pattern • Knockoutjs concepts • Demo extending basic MVC 4 App

5. What is Knockoutjs? • JavaScript Library implementing MVVM on the browser client. • Steve Sanderson – Microsoft ASP.Net Team • Pure JavaScript – no dependencies • Complements rather than replaces jQuery • Wide Browser Support - IE6+, FF2+, CHR, SF, OPR • Included by default in MVC 4 project template

6. Design Patterns • MVC – ASP.Net • MVVM – Binding based on observables • Silverlight & WPF • Knockoutjs – MVVM for browser client

7. MVC Model Request Controller Client (browser) Response (HTML) View ViewBag.Name= “Jack”; @Html.TextBox(“Name”, ViewBag(“name”))

8. MVC w/View Model Model View Model Controller Request Client (browser) Response (HTML & VM) View class viewModel { … public string Name { get; set; } … } @model viewModel @Html.TextBoxFor(model => model.Name)

9. MVC w/View Model & Knockoutjs Model View Model Controller Request Client (browser) MVVM (KO js) Response (HTML & VM) View class viewModel { … public string Name { get; set; } … } <input data-bind=“value: name” /> varviewModel = function() { … this.name = ko.observable(…) … }

10. Richer Client Experience • Beyond basic MVC experience • More interactive • Applies design patterns & binding • MVVM on the client

11. Knockoutjs • Dependency Tracking • observable (like INotifyPropertyChanged) • observableArray(like ObservableCollection<T>) • computed observables • Bindings • Text and appearance • Control flow • Events • Templates • Repetitive & nested blocks of markup

12. The Basics <span data-bind="text: personName"></span> …. <options data-bind=“options: people, …..”></span> varviewModel= { personName: ko.observable('Bob'), people: ko.observableArray([]) }; ko.applyBindings(viewModel); (knockoutjs.com) (demo)

13. Benefits • Simplified implementation of complex applications • Less code • Separation of Concerns • Maintainability • Alternative to jQuery solutions • Knockout is extensible

14. Demo • Creating a Richer UX for a simple MVC app • Upgrade existing MVC 4 Basic Project app • Add Knockoutjs & jQuery elements • Model: Manufacturer -> Model -> Details

15. Resources • www.knockoutjs.com - Main project site • Complete documentation and samples • Beginners tutorial : learn.knockoutjs.com • blog.stevensanderson.com – Blog by Steve Sanderson • www.knockmeout.net - Blog by Ryan Niemeyer • MSDN Mag – John Papa - February & March 2012 • Channel 9 – Several videos • KOGrid - github.com/ericmbarnard/KoGrid/wiki