Javascript Knockout.js中嵌套组件之间的通信

我试图在我的应用程序中使用淘汰自定义元素，但我遇到了一个问题。我有两个嵌套的自定义元素，我希望它们能够通信。我试图在它们之间共享observable，但我经常遇到一个错误：

无法处理绑定”模板：函数（）{return{nodes:$componentTemplateNodes}消息：未定义someVariable

-内部组件无法访问observable。如何解决此问题？或者可能有更好的方法在嵌套组件之间进行通信？我正在使用knockout 3.3.0

我的代码：

html:

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

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)
});

js:

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

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)
});

ko.components.register（“父组件”{
viewModel:函数（参数）{
this.params=params；
},
模板：“”
});
ko.components.register（“子组件”{
viewModel:函数（参数）{
this.params=params；
},
模板：“”
});
ko.applyBindings({
someVariable:ko.可观察（真）
});

---

演示：

问题在于

子组件的
DataContext
不是根视图模型。因此您必须直接引用根视图模型。如下所示：

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



子组件的上下文是
父组件的
viewmodel
，它没有
someVariable
属性。
问题是“someVariable”在“父组件”中不存在。
您应该将其传递到下一个绑定级别：

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 -->"
});

ko.components.register（“父组件”{
viewModel:函数（参数）{
this.params=params；
this.someVariable=params.variable；
},
模板：“”
});

我已经更新了JSFIDLE:
如果您只需要简单的容器，我建议将嵌套模板绑定到
$parent
范围


ko.components.register（“父容器”{
viewModel:函数（参数）{
this.params=params；
},
模板：“标题”
});
var模型={
someVariable:'测试'
}
ko.applyBindings（）；

阿斯达斯德萨德
阿斯达斯德萨德
另一个选择是使用未来的let绑定，该绑定将在稍后的淘汰迭代中推出。这将允许您在祖父母组件中执行以下操作：

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



基本上允许您从另一个组件访问父组件

可以在此处找到let绑定代码：
目前为止最好的答案。简单，保存在包装组件中，这样孩子们就不必处理父布局。喜欢这个！谢谢，@k2snowman69使用我自己编写的复杂解决方案工作了太多次：）我以前从未见过这个绑定，它是什么版本？检查github版本看起来目标是3.50，因为它包含在该测试版中