Building HTML5 and JavaScript Apps with MVVM and Knockout
Do you write a lot of HTML, JavaScript, and jQuery to push and pull data? Does your JavaScript seem to lack the structure and patterns of your non script code? In this course you will learn popular techniques to use data binding to bind your data to your target controls in HTML writing less code, but gaining more power. See how to consume json data, use json objects in JavaScript, and use declarative binding all by using the KnockoutJS JavaScript library. Learn how the XAML data binding paradigm has been brought to the web world with observable objects, change notifications, subscriptions, and 2 way bindings. Explore modern JavaScript patterns and practices that follow the SOLID principles, reduce errors in your code, and make code easier to maintain. After taking this course you will have a solid foundation for building robust web apps using common JavaScript patterns, MVVM, and KnockoutJS.
Duration: 4h 50m
Level: Intermediate
Released: 2/14/2012
Features:
| expand all | collapse all | Progress | Duration | |
|---|---|---|---|
Getting Started with Knockout and MVVM in JavaScript |
|
00:35:39 | |
|
Introduction
|
|
01:36 | |
|
JavaScript, Data Binding and Knockout
|
|
05:28 | |
|
JavaScript for Developers: Demo
|
|
02:24 | |
|
MVVM with Knockout
|
|
02:58 | |
|
MVVM with Knockout: Demo
|
|
02:24 | |
|
jsFiddle
|
|
02:08 | |
|
jsFiddle: Demo
|
|
03:54 | |
|
Using Knockout in Visual Studio
|
|
01:24 | |
|
Using Knockout in Visual Studio: Demo
|
|
01:41 | |
|
Begin Coding with Knockout
|
|
01:32 | |
|
Begin Coding with Knockout: Demo
|
|
06:16 | |
|
Resources
|
|
00:53 | |
|
Resources: Demo
|
|
02:16 | |
|
Summary
|
|
00:45 | |
Bindings and Observables |
|
00:53:16 | |
|
Introduction
|
|
01:17 | |
|
Push and Pull Data without Data Binding
|
|
01:50 | |
|
Push and Pull Data without Data Binding: Demo
|
|
04:02 | |
|
Observables
|
|
02:31 | |
|
Observables: Demo
|
|
04:02 | |
|
Computed Observables
|
|
02:20 | |
|
Computed Observables: Demo
|
|
04:54 | |
|
Computed Observables on an Object Graph: Demo
|
|
02:44 | |
|
Writeable Computed Observables
|
|
01:01 | |
|
Writeable Computed Observables: Demo
|
|
05:00 | |
|
Observable Arrays
|
|
01:42 | |
|
Observable Arrays: Demo
|
|
11:22 | |
|
Observable Array Functions
|
|
01:27 | |
|
Observable Array Functions: Demo
|
|
02:24 | |
|
Subcribe to Observables
|
|
01:19 | |
|
Subcribe to Observables: Demo
|
|
04:33 | |
|
Summary
|
|
00:48 | |
Built In Bindings |
|
00:48:22 | |
|
Built In Bindings Overview
|
|
03:56 | |
|
Bindings: Text and HTML: Demo
|
|
02:06 | |
|
Bindings: Values: Demo
|
|
04:41 | |
|
Bindings: Checkbox and Radio Button: Demo
|
|
07:54 | |
|
Bindings: Lists: Demo
|
|
06:04 | |
|
Bindings: Enable and Disable: Demo
|
|
02:49 | |
|
Bindings: DOM Element Focus: Demo
|
|
04:52 | |
|
Bindings: Click and Event: Demo
|
|
06:20 | |
|
Bindings: CSS and Styling: Demo
|
|
04:52 | |
|
Bindings: Attributes: Demo
|
|
03:43 | |
|
Summary
|
|
01:05 | |
JavaScript Patterns: Spaghetti to Ravioli |
|
00:42:45 | |
|
JavaScript Patterns with Knockout
|
|
01:07 | |
|
Spaghetti to Ravioli
|
|
04:54 | |
|
Spaghetti to Ravioli: Demo
|
|
04:50 | |
|
Object Literals and 'this'
|
|
01:34 | |
|
Object Literals and 'this': Demo
|
|
07:40 | |
|
The Module Pattern for ViewModels
|
|
04:10 | |
|
The Module Pattern for ViewModels: Demo
|
|
07:39 | |
|
The Revealing Module Pattern for ViewModels
|
|
02:27 | |
|
The Revealing Module Pattern for ViewModels: Demo
|
|
06:45 | |
|
Summary and Tips
|
|
01:39 | |
Templates, Control of Flow, and Containerless Bindings |
|
01:06:03 | |
|
Templates, Control of Flow, and Containerless Bindings
|
|
01:58 | |
|
Named Templates in Script Tags
|
|
01:25 | |
|
Named Templates in Script Tags: Demo
|
|
03:00 | |
|
Named Templates without Script Tags: Demo
|
|
02:23 | |
|
Control of Flow and Binding Contexts
|
|
04:36 | |
|
Control of Flow and Binding Contexts: Demo
|
|
07:00 | |
|
Anonymous/Inline Templates
|
|
03:15 | |
|
Anonymous/Inline Templates: Demo
|
|
03:10 | |
|
Dynamically Assigned Templates
|
|
02:12 | |
|
Dynamically Assigned Templates: Demo
|
|
05:48 | |
|
Swap Templates with Control of Flow: Demo
|
|
02:00 | |
|
Template Binding Parameters and Array Filtering
|
|
02:45 | |
|
Template Binding Parameters and Array Filtering: Demo
|
|
08:33 | |
|
Containerless (Comment) Bindings
|
|
02:46 | |
|
Containerless (Comment) Bindings: Demo
|
|
04:00 | |
|
External Templates
|
|
01:59 | |
|
External Templates: Demo
|
|
06:55 | |
|
Summary and Tips
|
|
02:18 | |
Custom Binding Handlers and Persisting Data |
|
00:44:06 | |
|
Custom Binding Handlers and Persisting Data
|
|
00:54 | |
|
Custom Binding Handlers
|
|
02:30 | |
|
Binding Handler for jQuery Animation: fadeVisible Demo
|
|
06:57 | |
|
jQuery UI Button Binding Handler Demo
|
|
04:59 | |
|
Binding Handler with Behavior: starRating Demo
|
|
04:26 | |
|
Unobtrusive JavaScript
|
|
02:05 | |
|
Unobtrusive JavaScript: Demo
|
|
05:17 | |
|
Loading and Saving Data
|
|
00:56 | |
|
Ajax, Service Abstraction, and jQuery Dialogs: Demo
|
|
07:44 | |
|
Change Tracking
|
|
01:05 | |
|
Change Tracking: Demo
|
|
04:45 | |
|
Knockout Mapper
|
|
01:05 | |
|
Summary and Tips
|
|
01:23 |
Getting Started with Knockout and MVVM in JavaScript