---
title: "How Automatic Updates Work in Knockout"  
description: "How Automatic Updates Work in Knockout"  
author: "ICSM Computer"  
published: 2025-04-23  
updated: 2025-04-23  
canonical: https://www.mindstick.com/interview/34048/how-automatic-updates-work-in-knockout  
category: "knockcout js"  
tags: ["knockout.js", "knockout mvc", "knockout observables", "knockout.js data-binding"]  
reading_time: 4 minutes  

---

# How Automatic Updates Work in Knockout

When you use `ko.observable` and `ko.computed`, Knockout creates a **dependency graph** under the hood.

### What Happens Internally?

1. You define a `ko.computed()` function.
2. When this function **runs**, Knockout:

   - Observes every `ko.observable()` or other `ko.computed()` accessed.
   - Registers those as **dependencies**.

3. When any of those dependencies change:

   - The computed is **re-evaluated**.
   - Any bound UI is updated **automatically**.

## Example: Automatic Update Chain

```javascript
function ViewModel() {
  this.price = ko.observable(10);
  this.quantity = ko.observable(2);

  this.total = ko.computed(() => {
    return this.price() * this.quantity();
  });
}

let vm = new ViewModel();
ko.applyBindings(vm);
```

### HTML:

```html
<p>Price: <input data-bind="value: price" /></p>
<p>Quantity: <input data-bind="value: quantity" /></p>
<p>Total: <strong data-bind="text: total"></strong></p>
```

### What Happens:

1. You change `price` or `quantity` in the input.
2. Because both are dependencies of `total`, Knockout **automatically updates** `total`.
3. The `<strong>` element showing total updates without you writing any DOM code.

### Visual: Dependency Chain

```plaintext
price() ───┐
           ├──> total() ───> bound to DOM
quantity() ─┘
```

When either `price()` or `quantity()` changes, Knockout knows `total()` depends on them, so it:

1. Recalculates `total()`
2. Updates anything bound to `total`

### Real-Time Updates in UI

Knockout bindings like `text`, `value`, `visible`, etc., **automatically respond** to computed observables.

**Example**:

```html
<span data-bind="text: fullName"></span>
```

This will instantly show the updated value whenever any observable used inside `fullName` changes.

### Tip: You Don’t Have to Manually Trigger Updates

You **don’t** need to write `total.notifySubscribers()` or manually refresh anything.

Just update observables:

```javascript
vm.price(15); // Total auto-updates
```

### Pro Tip: Chain Computed Observables

You can also build chains:

```javascript
this.subTotal = ko.computed(() => this.price() * this.quantity());
this.tax = ko.observable(0.1);
this.grandTotal = ko.computed(() => this.subTotal() * (1 + this.tax()));
```

Knockout will auto-manage the full chain of updates.

#### Summary

| Feature | Behavior |
| --- | --- |
| Automatic update | Happens when dependent observables change |
| No manual DOM updates | Knockout takes care of it through data-bind attributes |
| Chained dependencies | Supported and tracked automatically |
| Instant UI refresh | Via bindings like `text`, `value`, etc. |

## Answers

### Answer by ICSM Computer

When you use `ko.observable` and `ko.computed`, Knockout creates a **dependency graph** under the hood.

### What Happens Internally?

1. You define a `ko.computed()` function.
2. When this function **runs**, Knockout:

   - Observes every `ko.observable()` or other `ko.computed()` accessed.
   - Registers those as **dependencies**.

3. When any of those dependencies change:

   - The computed is **re-evaluated**.
   - Any bound UI is updated **automatically**.

## Example: Automatic Update Chain

```javascript
function ViewModel() {
  this.price = ko.observable(10);
  this.quantity = ko.observable(2);

  this.total = ko.computed(() => {
    return this.price() * this.quantity();
  });
}

let vm = new ViewModel();
ko.applyBindings(vm);
```

### HTML:

```html
<p>Price: <input data-bind="value: price" /></p>
<p>Quantity: <input data-bind="value: quantity" /></p>
<p>Total: <strong data-bind="text: total"></strong></p>
```

### What Happens:

1. You change `price` or `quantity` in the input.
2. Because both are dependencies of `total`, Knockout **automatically updates** `total`.
3. The `<strong>` element showing total updates without you writing any DOM code.

### Visual: Dependency Chain

```plaintext
price() ───┐
           ├──> total() ───> bound to DOM
quantity() ─┘
```

When either `price()` or `quantity()` changes, Knockout knows `total()` depends on them, so it:

1. Recalculates `total()`
2. Updates anything bound to `total`

### Real-Time Updates in UI

Knockout bindings like `text`, `value`, `visible`, etc., **automatically respond** to computed observables.

**Example**:

```html
<span data-bind="text: fullName"></span>
```

This will instantly show the updated value whenever any observable used inside `fullName` changes.

### Tip: You Don’t Have to Manually Trigger Updates

You **don’t** need to write `total.notifySubscribers()` or manually refresh anything.

Just update observables:

```javascript
vm.price(15); // Total auto-updates
```

### Pro Tip: Chain Computed Observables

You can also build chains:

```javascript
this.subTotal = ko.computed(() => this.price() * this.quantity());
this.tax = ko.observable(0.1);
this.grandTotal = ko.computed(() => this.subTotal() * (1 + this.tax()));
```

Knockout will auto-manage the full chain of updates.

#### Summary

| Feature | Behavior |
| --- | --- |
| Automatic update | Happens when dependent observables change |
| No manual DOM updates | Knockout takes care of it through data-bind attributes |
| Chained dependencies | Supported and tracked automatically |
| Instant UI refresh | Via bindings like `text`, `value`, etc. |


---

Original Source: https://www.mindstick.com/interview/34048/how-automatic-updates-work-in-knockout

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