interview

Home / DeveloperSection / Interviews / Explain the role of observables and observables arrays in Knockout.js

Ask Question
Ashutosh Kumar Verma

Ashutosh Kumar Verma

Follow
Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

27-Jun-2024

Knockout.js Observables and Observables Array

sure! In Knockout.js, observables and observable arrays play an important role in keeping the two-way data binding between your JavaScript data model and your HTML UI elements dynamic and up-to-date

Observables
Observables are special JavaScript objects provided by Knockout.js (ko.observable()). Your data values ​​are bound and made visible, meaning that Knockout.js is able to monitor changes to these values ​​and automatically update the UI whenever they change.

Example-

<div>
	<p>First Name: <span data-bind="text: firstName"></span></p>
	<p>Last Name: <span data-bind="text: lastName"></span></p>
	<p>Age: <span data-bind="text: age"></span></p>
</div>
<script>
function AppViewModel() {
    this.firstName= ko.observable('Jane);
    this.age= ko.observable(31);
}
// Applies bindings to the view
ko.applyBindings(new AppViewModel());
</script>


Each time you update this.firstName('Jane') or this.age(31), the corresponding <span> elements in your HTML will automatically be updated.

Visible arrays:
Observable arrays (ko.observableArray()) are special observables that manage an array of objects or values. They provide methods for making changes to the array (such as push, pop, splice, etc.), and ensure that any changes are tracked and propagated to the UI.

 

Observable Arrays
This would reveal people’s names and ages. When you add or remove objects from viewModel.people, Knockout.js will update the DOM accordingly.

Example- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>
    <title>Data Binding Example</title>
</head>
<body>
    <div class="container my-3">
        <h2>Knockout.js data-bind Example</h2>
       <div class="data-binds">
        <ul data-bind="foreach: people">
            <li>
                <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
            </li>
        </ul>        
       </div>
    </div>
   
    <script>

    var viewModel = {
    people: ko.observableArray([
                { name: 'Alice', age: 28 },
                { name: 'Bob', age: 35 },
                { name: 'Carol', age: 32 }
            ])
        };
        // Apply binding
        ko.applyBindings(viewModel);

    </script>
</body>
</html>

output-

Knockout.js Observable Array

  • Alice - 28
  • Bob - 35
  • Carol - 32

 

Observables and Observable arrays are fundamental to Knockout.js for achieving reactive and dynamic web applications, making it easy to manage and synchronize data between JavaScript and HTML.

 

Also, Read: Explain the role of observables and computed observables in Knockout.js?

MindStick Training

Liked By