Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

Home Interviews Explain the role of observables and observables arrays in Knockout.js – MindStick
Ask Question

1 Answers

Ashutosh Patel
Ashutosh Patel 27 Jun 2024
Report Abuse

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
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md