Knockout JS from scratch

Knockout is a JavaScript library that uses dependency tracking and declarative binding to create responsive display.
4.5 (39 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.
438 students enrolled
Sale Ends Today!
40% off
Take This Course
  • Lectures 33
  • Length 5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2014 English

Course Description

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.

What are the requirements?

  • Notepad++
  • Web Browser (Google Chrome)

What am I going to get from this course?

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

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Environment and Setup

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


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.


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


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

Section 2: Knockout Basics

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


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


This lesson introduces observables and discusses binding.


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


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

Section 3: Bindings

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?


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.


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.


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.

Section 4: Templates

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.


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.

Section 5: Application

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

Section 6: Conclusion

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ayad Boudiab, 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

Ready to start learning?
Take This Course