Download
1 / 15
150 likes | 269 Views
Join the Connecticut .NET Developers Group on November 13, 2012, for a deep dive into Knockout.js, a powerful JavaScript library designed to facilitate MVVM on the client side. Led by Bob Ohlheiser from R. J. Ohlheiser, Inc., this session will introduce you to the core concepts of Knockout.js, demonstrate its features in traditional MVC applications, and highlight how it complements jQuery. Learn about design patterns, observable data structures, and how to create a richer user experience in your applications.
E N D
KnockoutjsandJQuery Connecticut .NET Developers Group November 13, 2012 The One-Two Punch for Richer MVC 4 Applications
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
Objectives • Introduction to knockoutjs library and concepts • Simple demo showing common knockout features applied to traditional MVC app
Agenda • What is knockoutjs? • Design & Observable Pattern • Knockoutjs concepts • Demo extending basic MVC 4 App
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
Design Patterns • MVC – ASP.Net • MVVM – Binding based on observables • Silverlight & WPF • Knockoutjs – MVVM for browser client
MVC Model Request Controller Client (browser) Response (HTML) View ViewBag.Name= “Jack”; @Html.TextBox(“Name”, ViewBag(“name”))
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)
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(…) … }
Richer Client Experience • Beyond basic MVC experience • More interactive • Applies design patterns & binding • MVVM on the client
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
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)
Benefits • Simplified implementation of complex applications • Less code • Separation of Concerns • Maintainability • Alternative to jQuery solutions • Knockout is extensible
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
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
