淘汰嵌套组件答案

【问题标题】：Knockout nested components淘汰嵌套组件
【发布时间】：2015-08-24 23:13:28
【问题描述】：

我正在尝试在 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>

标签组件有一个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">element 已经绑定到文本输入上下文。现在的问题是如何实现这个场景。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

确实找到了问题。这是一个愚蠢的错误。

我注册的组件是label，在我的标签模板中我有<label> HTML标签，但由于label也是一个组件，KO试图将标签的模板绑定到标签标签，这导致错误和递归循环.

【讨论】：