---
title: "Communication between components in Knockout"  
description: "Communication between components in Knockout"  
author: "ICSM Computer"  
published: 2025-04-23  
updated: 2025-04-23  
canonical: https://www.mindstick.com/interview/34054/communication-between-components-in-knockout  
category: "knockcout js"  
tags: ["knockout.js", "knockout.js template", "knockout.js components"]  
reading_time: 4 minutes  

---

# Communication between components in Knockout

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`.

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

```javascript
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`.

```html
<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.

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

Use it in multiple components:

```html
<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.

```javascript
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 |

## Answers

### Answer by ICSM Computer

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`.

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

```javascript
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`.

```html
<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.

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

Use it in multiple components:

```html
<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.

```javascript
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 |


---

Original Source: https://www.mindstick.com/interview/34054/communication-between-components-in-knockout

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.