Knockoutjs and jquery
This presentation is the property of its rightful owner.
Sponsored Links
1 / 15

Knockoutjs and JQuery PowerPoint PPT Presentation


  • 55 Views
  • Uploaded on
  • Presentation posted in: General

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 [email protected] 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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Knockoutjs and jquery

KnockoutjsandJQuery

Connecticut .NET Developers Group

November 13, 2012

The One-Two Punch for Richer MVC 4 Applications


Bob ohlheiser

Bob Ohlheiser

  • R. J. Ohlheiser, Inc – West Hartford, CT

    • Software Engineering & Consulting

    • [email protected]

  • Connecticut .NET Developers Group (CTDOTNET)

    • Co-Leader & community event organizer


Objectives

Objectives

  • Introduction to knockoutjs library and concepts

  • Simple demo showing common knockout features applied to traditional MVC app


Agenda

Agenda

  • What is knockoutjs?

  • Design & Observable Pattern

  • Knockoutjs concepts

  • Demo extending basic MVC 4 App


What is knockoutjs

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

Design Patterns

  • MVC – ASP.Net

  • MVVM – Binding based on observables

    • Silverlight & WPF

    • Knockoutjs – MVVM for browser client


Knockoutjs and jquery

MVC

Model

Request

Controller

Client (browser)

Response (HTML)

View

ViewBag.Name= “Jack”;

@Html.TextBox(“Name”, ViewBag(“name”))


Mvc w view model

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

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

Richer Client Experience

  • Beyond basic MVC experience

  • More interactive

  • Applies design patterns & binding

  • MVVM on the client


Knockoutjs

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

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

Benefits

  • Simplified implementation of complex applications

  • Less code

  • Separation of Concerns

  • Maintainability

  • Alternative to jQuery solutions

  • Knockout is extensible


Knockoutjs and jquery

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

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


  • Login