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:
View-model: This holds the data that represents the state of the view. It is a pure JavaScript object.
Models: This contains data from the business domain.
Views: This displays the data we store in the view-model in a given instant of time.
To build reactive UIs, the Knockout library provides us with some important methods:
ko.observable: This is used to manage variables.ko.observableArray: This is used to manage arrays.ko.computed: They respond to changes from observables that are inside them.
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.