interview

home / developersection / interviews / communication between components in knockout

Ask Question
ICSM Computer

IT-Hardware & Networking

Ravi Vishwakarma is a dedicated Software Developer with a passion for crafting efficient and innovative solutions. With a keen eye for detail and years of experience, he excels in developing robust software systems that meet client needs. His expertise spans across multiple programming languages and technologies, making him a valuable asset in any software development project.

Follow
Can you answer this question?
Answer

1 Answers

ICSM Computer

ICSM Computer

23-Apr-2025

In Knockout.js, components are isolated by design — they each have their own view model and binding context. But sometimes, you'll want them to communicate, either to share data, trigger events, or sync state.

Let’s explore the most effective ways to handle component-to-component communication

Common Scenarios

  1. A parent passes data to a child 
  2. A child notifies the parent about an action 
  3. Siblings talk via a shared view model or message bus 

Parent → Child (via params)

This is straightforward. You pass observables or functions to the child via params.

<child-component params="someData: parentData, notify: onNotify"></child-component>

ko.components.register('child-component', {
  viewModel: function(params) {
    this.someData = params.someData;
    this.notifyParent = function () {
      params.notify("Child clicked!");
    };
  },
  template: `
    <div>
      <button data-bind="click: notifyParent">Click me</button>
    </div>
  `
});

Child → Parent (via callback)

Pass a function (e.g. onSave, onDelete) down to the child via params.

<todo-item params="text: taskText, onDelete: deleteTask"></todo-item>

Then the child just calls params.onDelete() when needed.

Sibling Components (via shared view model)

Define shared state outside the components and pass it down to both.

function SharedViewModel() {
  this.counter = ko.observable(0);
}
var shared = new SharedViewModel();

Use it in multiple components:

<comp-a params="shared: sharedState"></comp-a>
<comp-b params="shared: sharedState"></comp-b>

This lets components react to the same observable data.

Using a Pub/Sub (Custom Event Bus)

For more decoupled communication, use a simple event hub.

var eventBus = new ko.subscribable();

ko.components.register('sender', {
  viewModel: function() {
    this.send = () => eventBus.notifySubscribers("Hello from Sender");
  },
  template: `<button data-bind="click: send">Send</button>`
});

ko.components.register('receiver', {
  viewModel: function() {
    eventBus.subscribe(msg => alert("Receiver got: " + msg));
  },
  template: `<div>I listen to events</div>`
});

Now sender and receiver are independent, but still can talk

Summary

Method Best For
params (observables/functions) Parent → Child, Child → Parent
Shared state/view model Sibling communication, app-wide sync
Custom EventBus (subscribable) Decoupled, cross-component messaging

 

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy