Learning KnockoutJS

Name: Learning KnockoutJS
Rating: 4.1 (37 reviews)

Create powerful data-driven web applications using KnockoutJS, with the help of real-world examples

Created byPackt Publishing

Last updated 9/2015

English

What you'll learn

Use the Model-View-ViewModel software design pattern to build amazing web applications and powerful user interfaces
Configure your application to track the changes in the UI and update data automatically
Enhance the functionality of your app and make it more interactive by extending the components of your code

Course content

7 sections • 21 lectures • 2h 5m total length

The Course Overview5:11
This video will provide an overview of what will be taught in this course. We will orient the viewer on what KnockoutJS is and what it can accomplish for them; also, a sample project will be demonstrated.
The MVVM Design Pattern5:20
We will explain the MVVM software design pattern in relation to other MV* patterns (such as MVC and MVP). Describe how KnockoutJS uses MVVM in a web environment.
The Observer Design Pattern2:37
Describe the Observer software design pattern and how KnockoutJS implements it using the observable and observableArray data types.
JavaScript Closures and the Module Pattern5:27
There are many ways to get JavaScript to mimic the class structure of OOP languages. Examine several popular methods and then introduce the Module pattern and Revealing Module Pattern.

Creating Models, Views, and ViewModels8:26
We will create a website with the necessary Models, Views, and ViewModels to establish a KnockoutJS application.
Displaying Model Data in a View3:49
In order to display our model's data, we need to add data-binding syntax to the markup in our View.
Data Binding HTML Attributes4:09
There are several ways to data-bind attributes on HTML elements with KnockoutJS. We will take a look at three ways of manipulating attributes with KnockoutJS.

Updating the Model from the View and Vice Versa6:17
We will take a closer look at how to update the View Model from an HTML form element as well as populate an HTML form element with data from the View Model.
Data Binding Form Fields10:33
Investigate how to data-bind various HTML form elements with KnockoutJS.
Controlling Form Fields with Data Binding9:26
Demonstrate additional bindings that can help control the appearance and functionality of HTML form elements.

Examining the Different Types of Context9:22
Context is fundamental to the MVVM pattern and data-binding. Yet, it's often misunderstood. Demonstrate and explain the commonly used context objects in KnockoutJS.
Binding with Templates6:19
Templates allow Knockout developers to consolidate and share UI elements among many data-binding scenarios. Templates create a new binding context; it's necessary to understand how to deal with the new context.
Using Multiple and Nesting ViewModels5:47
Sometimes, it's necessary to use multiple ViewModels in a single View. We examine a few methods to compose a View and View Model using multiple ViewModels.

Creating Custom Functions4:21
You can attach custom functions to Knockout's core value types to extend their functionality.
Creating Extenders4:33
Extenders allow you to augment the functionality of observables by adding new properties.
Interacting with jQuery in Custom Bindings9:42
Custom bindings are a way of encapsulating behavior and exposing it in the same way in which you use 'text' or 'foreach' bindings.

Using Components and Custom Elements2:54
Components and custom elements allow you to consolidate often-used code into a single, reusable unit.
Using AMD Module Loaders4:08
AMD module loaders make it easy to modularize your code and load dependencies.
Examining Durandal to Build Single Page Applications (SPA)3:38
Durandal is a framework that uses KnockoutJS and RequireJS to build single-page applications.

Requirements

Some understanding of jQuery and AJAX would be helpful, but is not necessary.

Description

Among the various JavaScript libraries available to developers, KnockoutJS really stands out due to the diverse features it provides and also because it promotes the use of the Model-View-ViewModel (MVVM) design pattern to build data-driven web applications. Construct power-packed apps without compromising on its flexibility and build rich user interfaces, which will update in real-time when the data model state changes, eliminating the need to refresh pages.

Learning KnockoutJS will walk you through all of the key features of KnockoutJS and make it easy for you to quickly and easily build feature-and data-rich web applications that are easy to extend and maintain.

We start off with a brief introduction to KnockoutJS, and its various benefits, and explore the different design patterns in context of KnockoutJS to make your JavaScript code cleaner and more manageable. After that, we will walk through and understand the relationship between Models, Views, and ViewModels, as well as creating them.

Along with that, you will also learn how we can use the different data binding attributes to manipulate the output. We will also discuss and implement various important concepts such as two way data binding and dependency tracking to update your UI in real-time and to separate the components of your application into logical parts.

We will analyze Knockout's template feature to help you deal with data context in most scenarios. Then, we will take a look at how to track the changes in dependencies and subscribe to them using computed observables and subscriptions. Furthermore, you will also learn how to customize bindings and functions as well as using extenders to create our own set of Knockout tools. Finally, we will take a look at some advanced features of KnockoutJS to take your knowledge to the next level!

Learning KnockoutJS is more than just an introduction; it's a complete course on one of JavaScript's innovative libraries.

About The Author

Robert Gaut is a father, husband, musician, photographer, martial artist, and software developer. He began his career teaching application and database development at a technical college. After several years teaching, he spent more than a decade developing web-based content management systems for the automotive industry. He currently works for a large public school district where he develops business applications and data integration processes using Microsoft technologies.

Who this course is for:

If you have ever wanted to create rich, responsive, and dynamic user interfaces without mixing a lot of script, this course will give you everything you need to accomplish that goal with Knockout.JS. Users will need basic knowledge of JavaScript and HTML.

Learning KnockoutJS

What you'll learn

Explore related topics

Course content

Introducing KnockoutJS4 lectures • 19min

Displaying Data Using KnockoutJS3 lectures • 16min

Two-way Data Binding in KnockoutJS3 lectures • 26min

Understanding Context in KnockoutJS3 lectures • 21min

Using Computed Observables and Subscriptions2 lectures • 14min

Custom Bindings, Custom Functions, and Extenders3 lectures • 19min

Previewing Advanced KnockoutJS3 lectures • 11min

Requirements

Description

Who this course is for: