Question

我正在尝试从页面视图模型访问嵌套组件的视图模型。

这是模板：

<collapse-panel>
    <custom-component data-bind="viewModel: $root.customComponentVM">
    </custom-component>
</collapse-panel>

折叠面板组件的模板：

<div class="collapse panel-collapse" data-bind="
    template: { nodes: $componentTemplateNodes }">
</div>

在自定义组件中，我使用以下typescript代码添加了名为viewModel的自定义绑定：

ko.bindingHandlers["viewModel"] = {
    init: (element: any,
        valueAccessor: () => KnockoutObservable<any>,
        allBindingsAccessor: KnockoutAllBindingsAccessor,
        viewModel: any,
        bindingContext: KnockoutBindingContext): void => {
        valueAccessor()(viewModel);
    }
};

我的问题是init函数中的viewModel对象应该是CustomElementVM，而是我得到了CollapsePanelVM。

这是我在init方法中添加断点时得到的结果：

element              //the expected custom-element
viewModel            //the incorrect CollapsePanelVM
ko.dataFor(element)  //also returns the incorrect CollapsePanelVM

我还尝试使用以下语法绑定custom-element：

<div data-bind="component: {name: 'custom-component' ...

还使用Knockout注释语法绑定$ componentTemplateNodes：

<div class="collapse panel-collapse">
    <!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko -->
</div>

但是我仍然得到错误的viewModel。我在这里做错了什么，或者这是Knockout中的一个错误？感谢。

Answer 1

您的绑定处理程序正在collapse-panel组件的上下文中执行，因为它就是里面的。标记的上下文应用于其中，而不是标记本身（请注意，例如，if绑定如何工作 - 标记始终存在，但其内容可能不存在）。

如果您希望在viewModel的上下文中执行custom-component绑定，请对custom-component模板中的标记进行绑定。

如果您希望父级能够设置组件的视图模型，则应use params。

params - 将传递给组件的对象。通常这是一个包含多个参数的键值对象，而且是通常由组件的viewmodel构造函数接收。

使用$ componentTemplateNodes的Knockout嵌套组件导致错误的viewModel

1 个答案: