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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (11)

Similar a KnockOutJS with ASP.NET MVC

Similar a KnockOutJS with ASP.NET MVC (20)

Más de LearnNowOnline

Más de LearnNowOnline (18)

Último

Último (20)

KnockOutJS with ASP.NET MVC

Notas del editor