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

Question

我试图在我的应用程序中使用 knockout 自定义元素，但我遇到了一个问题。我有两个嵌套的自定义元素，我希望它们能够进行通信。我试图在它们之间共享 observable，但我不断收到错误消息:无法处理绑定(bind)“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

另一种选择是使用 future 的 let 绑定(bind)，它将在以后的 knockout 迭代中出现。这将允许您在祖 parent 组件中执行以下操作:

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

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

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