1 / 15

Knockoutjs and JQuery

Knockoutjs and JQuery. 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)

Download Presentation

Knockoutjs and JQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related