---
title: "What are observables in KnockoutJS, and how are they used?"  
description: "What are observables in KnockoutJS, and how are they used?"  
author: "Revati S Misra"  
published: 2023-04-18  
updated: 2023-11-24  
canonical: https://www.mindstick.com/forum/157859/what-are-observables-in-knockoutjs-and-how-are-they-used  
category: "javascript"  
tags: ["javascript framework", "knockout.js"]  
reading_time: 3 minutes  

---

# What are observables in KnockoutJS, and how are they used?

What are observables in [KnockoutJS](https://www.mindstick.com/forum/157857/what-is-knockoutjs-and-how-does-it-differ-from-other-javascript-frameworks), and how are they used?

## Replies

### Reply by Aryan Kumar

\
In Knockout.js, observables are a fundamental concept that facilitates two-way data binding between the view and the view model. Observables are special JavaScript objects that notify subscribers when their values change, allowing automatic updates to the UI whenever the underlying data changes. Here's an explanation of what observables are and how they are used in Knockout.js:

### 1. Observable Basics:

## Definition:

- An observable is an object that wraps a value and notifies subscribers when that value changes. In Knockout.js, observables are typically created using the **ko.observable** function.

## Example:

```plaintext
var name = ko.observable('John');
```

### 2. Observables in Action:

## Setting and Getting Values:

- You can set the value of an observable using parentheses when you pass an argument, and you can get its current value without arguments.

### 3. Subscribing to Changes:

## Subscribers:

- You can subscribe to an observable to be notified whenever its value changes. Subscribers are functions that are called when the observable is updated.

### 4. Computed Observables:

## Definition:

- Computed observables are a special type of observable that represents a value derived from one or more other observables or pure JavaScript values.

## Automatic Dependency Tracking:

- Computed observables automatically track dependencies and update themselves when any of the underlying observables change.

### 5. Observable Arrays:

## Definition:

- Observable arrays are used to represent lists of data. They have special functions to manipulate the array and automatically update the UI when the array changes.

## Array Functions:

- Observable arrays have functions like **push**, **pop**, **shift**, **unshift**, etc., which you can use to modify the array.

### 6. Using Observables in Data Binding:

## Data Binding Syntax:

- In the HTML markup, you can use the **data-bind** attribute to bind observables to elements, enabling two-way data binding.

## Input Binding:

- For input elements, you can use the **value** binding to bind the observable to the input value.

### 7. Observables in a View Model:

## View Model Example:

- In a view model, you can define multiple observables to represent different pieces of data.

### 8. Computed Observables in a View Model:

## View Model Example with Computed Observable:

- Computed observables can be used in view models to perform dynamic calculations based on other observables.

In summary, observables in Knockout.js are a powerful mechanism for handling data binding and automatic UI updates. They enable developers to create dynamic and responsive user interfaces by establishing a connection between the underlying data and the presentation layer. Observables are a core concept in Knockout.js, and their usage is central to building effective and interactive web applications.


---

Original Source: https://www.mindstick.com/forum/157859/what-are-observables-in-knockoutjs-and-how-are-they-used

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.