How Automatic Updates Work in Knockout

Question

ICSM Computer · Answer

When you use ko.observable and ko.computed, Knockout creates a
dependency graph under the hood.
What Happens Internally?
You define a ko.computed() function.When this function runs, Knockout:
Observes every ko.observable() or other ko.computed() accessed.Registers those as dependencies.
When any of those dependencies change:
The computed is re-evaluated.Any bound UI is updated automatically.
Example: Automatic Update Chain
function ViewModel() {
  this.price = ko.observable(10);
  this.quantity = ko.observable(2);
  this.total = ko.computed(() =andgt; {
    return this.price() * this.quantity();
  });
}
let vm = new ViewModel();
ko.applyBindings(vm);
HTML:
andlt;pandgt;Price: andlt;input data-bind="value: price" /andgt;andlt;/pandgt;
andlt;pandgt;Quantity: andlt;input data-bind="value: quantity" /andgt;andlt;/pandgt;
andlt;pandgt;Total: andlt;strong data-bind="text: total"andgt;andlt;/strongandgt;andlt;/pandgt;
What Happens:
You change price or quantity in the input.Because both are dependencies of total, Knockout automatically updates
total.The andlt;strongandgt; element showing total updates without you writing any DOM code.
Visual: Dependency Chain
price() ───┐
           ├──andgt; total() ───andgt; bound to DOM
quantity() ─┘
When either price() or quantity() changes, Knockout knows
total() depends on them, so it:
Recalculates total()Updates anything bound to total
Real-Time Updates in UI
Knockout bindings like text, value, visible, etc.,
automatically respond to computed observables.
Example:
andlt;span data-bind="text: fullName"andgt;andlt;/spanandgt;
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:
vm.price(15); // Total auto-updates
Pro Tip: Chain Computed Observables
You can also build chains:
this.subTotal = ko.computed(() =andgt; this.price() * this.quantity());
this.tax = ko.observable(0.1);
this.grandTotal = ko.computed(() =andgt; 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.
and

interview

How Automatic Updates Work in Knockout

ICSM Computer

Can you answer this question?

1 Answers

What Happens Internally?

HTML:

What Happens:

Visual: Dependency Chain

Real-Time Updates in UI

Tip: You Don’t Have to Manually Trigger Updates

Pro Tip: Chain Computed Observables

Summary

Liked By

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.