Question

我正在尝试使用KO组件绑定构建组件，但我对嵌套组件有一个小问题。

场景是我有文本输入组件，它有一个标签也是一个组件。

<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组件有一个JS和一个模板，模板如下所示

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

但我收到错误Multiple bindings (text and component) are trying to control descendant bindings of the same element

我理解<div class="col-sm-1">元素已绑定到文本输入上下文。现在问题是如何实现这种情况。

Answer 1

component绑定使用组件的模板填充<div>的内容，消除其中可能存在的任何内容（因此错误）。一种选择是在text-input组件的模板中添加另一个组件绑定，这将允许在{componentName: label, componentParams: labelParams}中传递componentName / componentParams。您还可以查看Knockout 3.3中添加的working with component child nodes。

Answer 2

实际上发现了这个问题。这是一种愚蠢的错误。

我的注册组件是label，在我的标签模板中，我有<label> HTML标记，但由于label也是一个组件，因此KO尝试绑定标签＆＃ 39;标签标签导致错误和递归循环的模板。

Knockout嵌套组件

2 个答案: