Summary

In this chapter, you have learned the basics of the Knockout library. We have created a simple form to add products to our catalog. You have also learned how to manage observable collections and display them in a table. Finally, we have developed the search functionality using computed observables.

You have learned three important Knockout concepts:

To build reactive UIs, the Knockout library provides us with some important methods:

To iterate over the elements of an array, we use the foreach binding. When we use the foreach binding, we create a new context. This context is relative to each item. If we want to access out of this context we should use the $parent object.

When we want to create a new context relative to a variable, we can attach the with binding to any DOM element.

We use the click binding to attach the click event to an element. Click on event functions to always get the context as the first parameter.

To get values from a variable that we are not sure is an observable, we can use the ko.unwrap function.

We can use the ko.utils.arrayFilter function to filter collections.

In the next chapter, we are going to use templates to keep our code maintainable and clean. Template engines help us to keep our code arranged and allow us to update views in an easy way.

There is a copy of the code developed in this chapter at:

https://github.com/jorgeferrando/knockout-cart/archive/chapter1.zip.