Knockout JS from scratch

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.

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.

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.

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

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