Introduction to observables and observable arrays

Question

ICSM Computer · Answer

Absolutely! Let's dive into the core concepts of Knockout.js:
observables and observableArrays. These are what give Knockout its
reactive binding magic 🪄.
What is an observable in Knockout.js?
An observable is a special JavaScript object that tracks changes to a value. When the value changes, any UI elements or computed functions bound to it
automatically update.
Basic Syntax:
let myObservable = ko.observable("Hello");
To get the value: myObservable()To set a new value: myObservable("World")
Example:
let name = ko.observable("Alice");
console.log(name());         // Outputs: Alice
name("Bob");
console.log(name());         // Outputs: Bob
What is an observableArray?
An observableArray is just like a regular array, but Knockout tracks additions/removals and updates the UI accordingly.
✅ Syntax:
let items = ko.observableArray(["Apple", "Banana"]);
Useful Methods:
push(item)remove(item)pop(), shift(), unshift()replace(oldItem, newItem)
Example:
let fruits = ko.observableArray(["Apple", "Banana"]);
fruits.push("Cherry");         // ["Apple", "Banana", "Cherry"]
fruits.remove("Banana");       // ["Apple", "Cherry"]
Example in HTML (Binding with UI)
andlt;pandgt;First Name: andlt;input data-bind="value: firstName" /andgt;andlt;/pandgt;
andlt;pandgt;Hello, andlt;span data-bind="text: firstName"andgt;andlt;/spanandgt;!andlt;/pandgt;
andlt;ul data-bind="foreach: fruits"andgt;
  andlt;li data-bind="text: $data"andgt;andlt;/liandgt;
andlt;/ulandgt;
function ViewModel() {
  this.firstName = ko.observable("John");
  this.fruits = ko.observableArray(["Apple", "Banana"]);
}
ko.applyBindings(new ViewModel());
Recap:
Concept
Type
Use Case
ko.observable()
Single value
Text fields, numbers, booleans
ko.observableArray()
Arrays
Lists, tables, multi-selections
and

interview

Introduction to observables and observable arrays

ICSM Computer

Can you answer this question?

1 Answers

What is an `observable` in Knockout.js?

Basic Syntax:

Example:

What is an `observableArray`?

✅ Syntax:

Useful Methods:

Example:

Example in HTML (Binding with UI)

Recap:

Liked By

Concept	Type	Use Case
`ko.observable()`	Single value	Text fields, numbers, booleans
`ko.observableArray()`	Arrays	Lists, tables, multi-selections