CODEWITHSUNDEEP
javascriptknockout.js
Bodzio
Bodzio

Reputation: 2520

Communication between nested components in Knockout.js

I'm trying to use knockout custom elements in my application, but I'm stuck with one problem. I have two nested custom elements and I want them to communicate. I tried to share observable between them, but I'm constantly getting an error: Unable to process binding "template: function (){return { nodes:$componentTemplateNodes} } Message: someVariable is not defined - inner component can't access observable. How to fix this? Or maybe there is a better way to communicate between nested components? I'm using knockout 3.3.0

my code:

html:

<parent-component params="variable: someVariable">
    <child-component params="variable: someVariable"></child-component>
</parent-component>

js:

ko.components.register("parent-component", {
    viewModel: function (params) {
        this.params = params;
    },
    template: "<div data-bind='text: params.variable'></div> <!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko -->"
});

ko.components.register("child-component", {
    viewModel: function (params) {
        this.params = params;
    },
    template: "<div data-bind='text: params.variable'></div>"
});

ko.applyBindings({
    someVariable: ko.observable(true)
});

demo: http://jsfiddle.net/50zbtxe3/

Upvotes: 2

Views: 3238

Answers (4)

k2snowman69
k2snowman69

Reputation: 1929

One more option is to use the future let binding which will be coming out with in a later iteration of knockout. This would allow you to do the following in the grandparent component:

<!-- ko let: { $parentComponent: $component } -->
<parent-component params="variable: $component.someVariable">
    <child-component params="variable: $parentComponent.someVariable"></child-component>
</parent-component>
<!-- /ko -->

Basically allowing you to get access to a parent component from another component.

The let binding code can be found here: https://github.com/knockout/knockout/blob/241c26ca82e6e4b3eaee39e3dc0a92f85bc1df0c/src/binding/defaultBindings/let.js

Upvotes: 4

codevision
codevision

Reputation: 5560

I would recommend bind nested template to the $parent scope if you need just simple container

ko.components.register("parent-container", {
viewModel: function (params) {
    this.params = params;
},
template: "<div data-bind='style: { color: params.color }'>Header</div> <!-- ko template: { nodes: $componentTemplateNodes, data: $parent } --><!-- /ko -->"
});

var model = {
  someVariable: 'test'
}

ko.applyBindings();
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<parent-container params="color: 'red'">
  <div data-bind="text: someVariable">asdasdsad</div>
</parent-container>

<parent-container params="color: 'blue'">
  <div data-bind="text: someVariable2">asdasdsad</div>
</parent-container>

Upvotes: 3

TSV
TSV

Reputation: 7641

The thing is that "someVariable" does not exist inside the "parent-component". You should pass it to the next binding level:

ko.components.register("parent-component", {
viewModel: function (params) {
    this.params = params;
    this.someVariable = params.variable;
},
template: "<div data-bind='text: params.variable'></div> <!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko -->"
});

I've updated the jsfiddle: http://jsfiddle.net/50zbtxe3/1/

Upvotes: 3

Domysee
Domysee

Reputation: 12846

The problem is that the DataContext of the child-component is not the root viewmodel. So you have to reference the root viewmodel directly. Like this:

<parent-component params="variable: someVariable">
    <child-component params="variable: $root.someVariable"></child-component>
</parent-component>

The context of child-component is the viewmodel of the parent-component, which does not have a someVariable property.

Upvotes: 1

Related Questions