Knockout provides an elegant way of updating the user interface using Javascript View models. Javascript has an inheritance model. With that, we can create a hierarchy of classes. Consider the following HTML with Knockout bindings.

We use a simple Model class. Load it with data. And bind it to the HTML.

Simple inheritance

Klaus Komenda has an article on Javascript inheritance. As an example, we inherit the Model class from the BaseModel class.

BaseModel has an observable named name.  And Model has an observable named detail. Since Model inherits from BaseModel, a Model object has both the name and detail observable properties.

Overriding functions

It is possible to override base class functions. Both BaseModel and Model classes define a load function. From the Model class, we can invoke the load function of the BaseModel class.

There is a good StackOverflow article that explains the benefits of declaring a function via prototypes.

Inheriting observable properties

Observable property in a Knockout View model is a function. All the objects of the derived classes share the same base class function. Any observable property defined in the base class is shared among multiple object instances.

In the above example, We create a collection of Model objects.

Both the Model objects share the same value for the name observable. In this case, both models have the same name value of a2. To overcome the problem, we use constructor inheritance as follows:

If multiple instances of the derived class are required, use constructor inheritance rather than prototype inheritance.

Javascript inheritance in Knockout ViewModels
Tagged on: