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 • • • • • •

What is KnockOutJS and why do I care? Getting Started Observables Bindings Templating Customizing KnockOutJS

What’s KnockoutJS and why do I care? KnockoutJS (KO for short) allows: •Rich, responsive user interfaces •Dependency tracking •Declarative Bindings •Self-contained JavaScript library (14Kb with gZip!) •Supports mainstream browsers (IE6+, FF 2+, Chrome, Safari and others) •MVVM for JSON data Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What is KnockoutJS • • • • •

Declarative Bindings Automatic UI Refresh Dependency Tracking Templating No Dependencies!

What isn’t KnockOutJS • Not a replacement for jQuery • 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 KnockoutJS 1. Observables and dependency tracking 2. Declarative bindings 3. Templating

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

Model-View-View-Model (MVVM)

MVVM: Design pattern for building user interfaces •Model – Data of your application •View Model – Entity (field) structure of your data •View – UI that represents the View Model and the interactions within it Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Overview • • • • • •

What is KnockOutJS and why do I care? Getting Started Observables Bindings Templating Customizing KnockOutJS

Getting Started • If using ASP.NET MVC 4 • Good news, it’s part of the template! • Start a new MVC 4 project in Visual Studio

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

Update KO and add Knockout.Mapping • Knockout.mapping is an plugin to KO • Need latest version of KO for items like $index • https://github.com/SteveSanderson/knockout/downloads

In Visual Studio, open: Tools > Library Package Manager > Package Manager Console Type: Install-Package knockout.mapping

Overview • • • • • •

What is KnockOutJS and why do I care? Getting Started Observables Bindings Templating Customizing KnockOutJS

Observables • One of the 3 cores of KnockoutJS • 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 … var viewModel = { productName: ‘Widget’, productCat: ‘Other’ }; … The product is <span data-bind=“text: productName”></span>

Computed Observables • Allows customizations to View Model fields 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 • Used for a collection of items var myArray = ko.observableArray ([ { name: “Windows”, category: “OS” }, { name: “Office”, category: “Application” } ]);

Overview • • • • • •

What is KnockOutJS and why do I care? Getting Started Observables Bindings Templating Customizing KnockOutJS

Learn More! â&#x20AC;˘ This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details!

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

Turn static files into dynamic content formats.

Create a flipbook