CODEWITHSUNDEEP
javascriptknockout.js
Rakesh
Rakesh

Reputation: 157

Knockout nested components

I am trying build components with help of KO component binding, but i have a small problem with nested components.

The scenario is I have text-input component which has a label which also is a component.

<div data-bind="component:{name:'text-input', params:{data:$data, parent:$parent}}," class="form-horizontal">
    <div class="form-group row">
        <div class="col-sm-1">
            <div data-bind="component:{name:'label', params:{}}"></div>
        </div>

        <div class="col-sm-11">
            <input type="text" data-bind="value:value" class="form-control" />
        </div>
    </div>
</div>

Label component has a JS and a template, template looks like below

<label data-bind="text:labelText"></label>

But I am getting an error Multiple bindings (text and component) are trying to control descendant bindings of the same element

I understand <div class="col-sm-1">element is already bound to text-input context. Now the question is how to achieve this scenario.

Upvotes: 1

Views: 989

Answers (2)

Rakesh
Rakesh

Reputation: 157

Actually found the issue. It's kind of silly mistake.

My registered component is label and in my label's template I have <label> HTML tag, but since label is also a component, KO was trying to bind label's template to label tag which resulted in error and recursive loop.

Upvotes: 0

CrimsonChris
CrimsonChris

Reputation: 4641

The component binding fills the content of the <div> with the component's template, wiping out whatever else might be inside (hence the error). One option would be to add another component binding inside the text-input component's template which would allow a componentName/componentParams to be passed in {componentName: label, componentParams: labelParams}. You could also look at working with component child nodes added in Knockout 3.3.

Upvotes: 1

Related Questions