Knockout JS from scratch
4.7 (66 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
536 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Knockout JS from scratch to your Wishlist.

Add to Wishlist

Knockout JS from scratch

Knockout is a JavaScript library that uses dependency tracking and declarative binding to create responsive display.
4.7 (66 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
536 students enrolled
Created by Ayad Boudiab
Last updated 1/2014
Current price: $10 Original price: $25 Discount: 60% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Provide the user an in-depth knowledge of Knockout JS.
  • Illustrate, using examples, the power and ease-of-use of declarative binding and dependency tracking.
  • Help users incorporate powerful and flexible functionality in their web sites with minimal lines of code.
View Curriculum
  • Notepad++
  • Web Browser (Google Chrome)

Knockout is a JavaScript library that helps creating rich and responsive display. With applications that update dynamically, Knockout will be a great fit to implement simple and maintainable binding and dependency tracking. In this course, I will explore Knockout JS in details. I will cover all the available bindings through examples. I will explore observables, observable arrays, and computed observables. I will also discuss templates and coverting data to JSON format. By the time you are done with this course, you will be eager to add Knockout to every web application you are working on.

Who is the target audience?
  • People interested in learning a powerful and in-demand JavaScript library
  • Developers who want to apply the Model-View-ViewModel pattern
  • Developers wishing to benefit from declarative binding, automatic UI refresh, dependency tracking, and templating in their web applications
Students Who Viewed This Course Also Viewed
Curriculum For This Course
33 Lectures
Environment and Setup
4 Lectures 32:22

In this lecture, we will download Knockout and look at an example to see how everything fits together.

Preview 08:38

In this discussion, I will explore different development tools available out there for writing Knockout code. Then, I will choose the tool that best fits this course.

Looking at Available Development Tools

In this lecture, we will look at JSFiddle and see how we can use that to experiment with some code and ideas.

Using JSFiddle

This lecture will illustrate how we can use the developer tools to debug the code and create breakpoints.

Debugging Code
Knockout Basics
5 Lectures 01:17:14

In this lecture, we will walk through an example to illustrate some key points in Knockout.

Getting Started

In this lesson, we will discuss what the MVVM design pattern is.

MVVM Design Pattern

This lesson introduces observables and discusses binding.

Preview 16:44

With this lecture, we will expand our knowledge on observables and see how we can work with observable arrays.

Observable Arrays

This lesson will explore the read and write properties to support two-way binding.

More on Observables
19 Lectures 02:25:43

Binding is one of the key features of knockout. Today, we will discuss how to bind the visible property of an html element to show/hide the element.


In this lesson, we will talk about text binding, and how that can be setup using knockout.


How about binding to HTML and interpreting the HTML tags? We will see how that can be done in this lesson?

Preview 06:07

In some cases you might have some style (CSS) that you would like to apply as you bind to an element. This lesson wil show you how that can be done.


We discussed binding with CSS in the previous lesson. Today, we will look at another approach that gives us more flexibility - Binding with style.


The attr binding is a complex object in the sense that I can create multiple properties within it. In this case, we will see how to bind the title and src attributes of an image.


This lesson will illustrate how to use the if binding.


In this lecture we will experiment with the "with" binding


When creating tables, it wil be helpful to create a single row and have the body of the table bind to an array. Now a row will be created for each record in the array. We will see how that is accomplished in this lesson.


In this exercise, we will take the foreach a step further and discuss $data and $index and understand the context. We will also see how to data bind to a click event of a button.

Bindings-Foreach - Part 2

This will wrap up our discussion on foreach. We will go three levels deep to illustrate the context. Also, we will discuss the use of $parent.

Bindings-Foreach - Part 3

Today, we will see how to use bindings with a click event.


With this exercise, we will bind the mouseover and mouseout events to hide and show some text.


Here, we will introduce a course registration HTML-5 form. Then, we will add the necessary code to bind the name to the terms and conditions, and allow the user to submit the form only when the terms and conditions are accepted.


The hasFocus is tied to an "editing" observable property. In today's exercise, we will see how that plays out when we click on some text and change that to an input box that we can modify.


This exercise is a combination of the checked binding and observable arrays.


This lesson wil show how to use bindings with a "select" HTML5 element. We will bind the options of the select to an observable array.


This lesson will take the option bindings we have discussed previously a step further. We will support multiple selections and display the selected items on the right hand side (that represents a cart of chosen items). We will also display the content of the array in JSON format at the end of the form for debugging purposes.


In this exercise, we will get into the details of defining our own binding. We will see the use of the init and update functions.

Bindings-Custom Binding
3 Lectures 16:08

In this lesson, we start discussing templates. We will create our view model and the HTML tags, but we will bind to a template instead. The template is defined in another script.


After introducing templates in the previous lesson, we will build upon that and see how we can simplify template binding using foreach.

Preview 04:34

In this template exercise, we will look at yet another way of using templates. We will use ko template comment and avoid the script template altogether.

1 Lecture 12:35

This lesson will discuss a wrap-up exercise that covers some of the features we have been experimenting with.

Comprehensive Application
1 Lecture 01:11

With this lecture we will wrap up our knockout JS course. Hope you enjoyed it!!

About the Instructor
Ayad Boudiab
4.4 Average rating
189 Reviews
6,508 Students
3 Courses
Senior Application Developer / Technical Trainer

 I am a Senior Application Developer with a degree in Computer Science from Georgia State University. I have about 15 years in programming experience and 14 years in teaching experience. I mostly work on Microsoft based technologies such as C#, ASP.NET, and SQL Server. I taught programming courses (Java, C#, SQL...) at the continuing education department in Georgia Perimeter College. I also taught a course online with Stark State College in Ohio. In addition to my full time developer position with a company in Alpharetta/GA, I am also a part time technical trainer with DevMedia/Brazil. I create training videos (such as jQuery, jQuery UI, JavaScript, Kendo UI, ASP.NET, and SQL Server) for their portal site