KnockOutJS with ASP.NET MVC

KnockoutJS with
ASP.NET MVC
Part 1

Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

Overview


Overview
• What is KnockOutJS and why do I care?


Overview
• Getting Started


Overview
• Getting Started
• Observables


Overview
• Getting Started
• Observables
• Bindings


Overview
• Getting Started
• Observables
• Bindings
• Templating


Overview
• Getting Started
• Observables
• Bindings
• Templating
• Customizing KnockOutJS


What’s KnockoutJS and why do I
care?


care?
KnockoutJS (KO for short) allows:


care?
• Rich, responsive user interfaces


care?
• Dependency tracking


care?
• Declarative Bindings


care?
• Self-contained JavaScript library (14Kb
with gZip!)


care?
with gZip!)
• Supports mainstream browsers (IE6+, FF
2+, Chrome, Safari and others)


care?
with gZip!)
• Supports mainstream browsers (IE6+, FF
2+, Chrome, Safari and others)
• MVVM for JSON data


What is KnockoutJS


What is KnockoutJS
• Automatic UI Refresh


What is KnockoutJS
• Dependency Tracking


What is KnockoutJS
• Templating


What is KnockoutJS
• Templating
• No Dependencies!


What isn’t KnockOutJS


• Not a replacement for jQuery


• Not a Prototype for JavaScript


• Not a Prototype for JavaScript

…
<head>
<script type=“text/javascript” src=“jquery.min.js” />
<script type=“text/javascript” src=“knockout.min.js” />
</head>
…


3 Core Features of


3 Core Features of
1. Observables and dependency tracking


3 Core Features of
2. Declarative bindings


3 Core Features of
2. Declarative bindings
3. Templating


Model-View-View-Model


MVVM: Design pattern for building user
interfaces


interfaces
• Model – Data of your application


interfaces
• View Model – Entity (ﬁeld) structure of
your data


interfaces
• View Model – Entity (ﬁeld) structure of
your data
• View – UI that represents the View
Model and the interactions within it


Getting Started


Getting Started
• If using ASP.NET MVC 4


Getting Started
• Good news, it’s part of the template!


Getting Started
• Start a new MVC 4 project in Visual Studio


Getting Started
• If using some other technology


Getting Started
• If using some other technology
• Download KO from http://knockoutjs.com


Update KO and add
Knockout.Mapping


Update KO and add
Knockout.Mapping
• Knockout.mapping is an plugin to KO


Update KO and add
Knockout.Mapping
• Need latest version of KO for items like
$index


Update KO and add
Knockout.Mapping
$index
• https://github.com/SteveSanderson/knockout/downloads


Update KO and add
Knockout.Mapping
$index
• https://github.com/SteveSanderson/knockout/downloads

In Visual Studio, open:
Tools > Library Package Manager > Package Manager Console

Type:
Install-Package knockout.mapping


Observables


Observables
• One of the 3 cores of KnockoutJS


Observables
• Allows reading and writing values


Observables
• Allows reading and writing values
• Allows subscriptions (for notifying of a
change)


Observables: Example


• View Model in KO is easy, just declare
your view model like the example
below


below
…
var viewModel = {
productName: ‘Widget’,
productCat: ‘Other’
};
…


below
…
var viewModel = {
productName: ‘Widget’,
productCat: ‘Other’
};
…

The product is <span data-bind=“text: productName”></span>


Computed Observables


• Allows customizations to View Model
ﬁelds


ﬁelds
function productsViewModel () {
this.productName = ko.observable(‘Widget’);
this.productModel = ko.observable(‘12345’);

this.productDisplay = ko.computed(function() {
return this.productName() + “ ( “ + this.productModel ()+ “ ) “;
}, this);
}


ﬁelds
function productsViewModel () {
this.productName = ko.observable(‘Widget’);
this.productModel = ko.observable(‘12345’);

this.productDisplay = ko.computed(function() {
return this.productName() + “ ( “ + this.productModel ()+ “ ) “;
}, this);
}

The result is: Widget (12345)


Observable Arrays


Observable Arrays
• Used for a collection of items


Observable Arrays
• Used for a collection of items
var myArray = ko.observableArray ([
{ name: “Windows”, category: “OS” },
{ name: “Office”, category: “Application” }
]);


Learn More!


Learn More!
• This is an excerpt from a larger course. Visit
www.learnnowonline.com for the full details!


KnockOutJS with ASP.NET MVC

More Related Content

What's hot

Similar to KnockOutJS with ASP.NET MVC

More from LearnNowOnline

Recently uploaded

KnockOutJS with ASP.NET MVC

Editor's Notes