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

Question

我正在尝试在我的应用程序中使用淘汰自定义元素，但我遇到了一个问题。 我有两个嵌套的自定义元素，我希望它们进行通信。 我试图在它们之间共享observable，但是我经常遇到错误： Unable to process binding "template: function (){return { nodes:$componentTemplateNodes} } Message: someVariable is not defined - 内部组件无法访问observable如何解决这个问题？或者可能有更好的方法在嵌套组件之间进行通信？我正在使用knockout 3.3.0

我的代码：

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

演示： http ： //jsfiddle.net/50zbtxe3/

Answer 1

还有一个选择是使用未来的let绑定，这将在稍后的淘汰迭代中出现。 这将允许您在祖父组件中执行以下操作：

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

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

let绑定代码可以在这里找到： https ： //github.com/knockout/knockout/blob/241c26ca82e6e4b3eaee39e3dc0a92f85bc1df0c/src/binding/defaultBindings/let.js

Answer 2

事实是“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 -->"
});

我已经更新了jsfiddle： http ： //jsfiddle.net/50zbtxe3/1/

Answer 3

如果你只需要简单的容器，我会建议将嵌套模板绑定到$parent范围

 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> 

Answer 4

问题是child-component的DataContext不是根视图模型。 所以你必须直接引用root viewmodel。 像这样：

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

child-component的上下文是parent-component child-component的viewmodel parent-component ，它没有someVariable属性。