LearnNowOnline

Learn your way! Get started

ASP.NET Using Knockout.js, Part 2 of 2: Bindings and JSON

with expert James Curtis

Watch trailer

Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack
Release date 8/4/2012
Level Advanced
Runtime 3h 3m
Closed captioning Included
Transcript Included
eBooks / courseware Included
Hands-on labs N/A
Sample code Included
Exams Included
Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More

Course description

The Knockout.js Library is a growing technology that is used with ASP.NET to create rich responsive user interfaces. This course will cover the 5 types of Bindings; Appearance, Conditional, Form Fields, Custom and Templates found in Knockout.js. Each type of Bindings has several options that the course will cover in both theory and demonstration. After Bindings the course will then cover loading and saving of JSON data and then how to extend Knockout.js with custom functions.

Prerequisites

This course assumes that the users have an understanding of developing web applications using HTML, ASP.NET, and JavaScript in a Visual Studio 2010 development environment.

Learning Paths

This course is part of the following LearnNowOnline SuccessPaths™:
JavaScript Frameworks

Meet the expert

James Curtis is a .NET Developer that primarily works in the UX space. He has worked on and for several large projects alongside Microsoft Consulting. James has spoken at several code camps about UX development for ASP.NET and SharePoint. He is an active participant in the development community tweeting and blogging about several topics in the UX area. James is an active consultant and is also assisting in several Start-ups contributing his UX experience.

Course outline

Bindings

Bindings Appearance (35:02)
  • Introduction (00:36)
  • Appearance Bindings (00:42)
  • Appearance Bindings: Visible (01:03)
  • Demo: Visible (03:39)
  • Demo: Test Visible (00:39)
  • Appearance Bindings: Text (00:59)
  • Demo: Text (03:15)
  • Demo: KO Bindings (02:05)
  • Appearance Bindings: Html (01:04)
  • Demo: Html (03:12)
  • Appearance Bindings: Css (01:34)
  • Demo: Css (03:47)
  • Demo: Debug (01:25)
  • Appearance Bindings: Style (01:25)
  • Demo: Style (03:26)
  • Appearance Bindings: Attr (00:53)
  • Summary (00:13)
  • Control Flow Binding: Foreach (01:17)
Bindings Control Flow (24:43)
  • Introduction (00:34)
  • Control Flow Binding: Foreach (01:17)
  • Demo: Foreach Binding (02:46)
  • Demo: Button (03:48)
  • Demo: Running the Page (02:41)
  • Control Flow Binding: If (00:58)
  • Demo: If Binding (04:24)
  • Control Flow Binding: Ifnot (00:29)
  • Demo: Ifnot Binding (02:27)
  • Control Flow Binding: With (00:56)
  • Demo: With Binding (03:59)
  • Summary (00:20)

Form Field Bindings

Form Field Bindings (31:28)
  • Introduction (00:31)
  • Form Field Binding: Click (00:48)
  • Demo: Click Binding (04:37)
  • Form Field Binding: Event (01:02)
  • Demo: Event Binding (03:33)
  • Form Field Binding: Submit (00:38)
  • Demo: Submit Binding (03:24)
  • Form Field Binding: Enable (00:46)
  • Demo: Enable Binding (03:38)
  • Form Field Binding: Disable (00:18)
  • Demo: Disable Binding (01:53)
  • Form Field Binding: Value (00:34)
  • Demo: Value Binding (02:49)
  • Form Field Binding: HasFocus (00:54)
  • Demo: HasFocus Binding (05:37)
  • Summary (00:16)
More Form Field Bindings (29:28)
  • Introduction (00:28)
  • Form Field Binding: Checked (00:42)
  • Demo: Checked Binding (06:49)
  • Form Field Bindings: Options (00:37)
  • Demo: Options Binding (11:01)
  • Form Field Binding: SelectedOp (00:43)
  • Demo: Selected Options (04:06)
  • Form Field Binding: UniqueName (00:35)
  • Demo: UniqueName Binding (04:08)
  • Summary (00:15)

Bindings, JSON and Functions

Advanced Bindings (21:09)
  • Introduction (00:46)
  • Creating Custom Bindings (01:02)
  • Registering (01:03)
  • Demo: Registering Binding (04:17)
  • Demo: Registering Binding Cont (05:57)
  • Template Binding (00:57)
  • Template Binding: Example (00:43)
  • Demo: Template Binding (06:00)
  • Summary (00:20)
Working with JSON (28:43)
  • Introduction (00:40)
  • Loading and Saving: JSON Data (01:56)
  • Demo: Loading and Saving JSON (05:08)
  • Demo: Calling from AJAX (04:12)
  • Demo: Writing our JavaScript (05:12)
  • Demo: Running the program (01:40)
  • Demo: Pushing Data (06:14)
  • Demo: jQuery Click Binding (03:06)
  • Summary (00:31)
Custom Functions (12:54)
  • Introduction (00:39)
  • Extending KO with Custom Func (00:54)
  • Demo: Extending KO (03:22)
  • Demo: Create Custom Function (03:04)
  • Demo: More Custom Functions (04:30)
  • Summary (00:23)