KnockOutJS：后代的行为很奇怪完整和组件自定义元素

淘汰赛版本：3.5.1

我在主.html文件中有一个自定义元素，如下所示：

<my-component></my-component>

内部有一个我要附加jQuery验证的表单，该表单无法正常工作，因为调用行$("#myForm").validate时，该表单尚未在DOM中。

我创建了一个非常基本的jsfiddle来说明问题：https://jsfiddle.net/sb1of04g/

请注意，如果您删除超时，结果将为0。如果将警报移至ko.applyBindings(new test());以下，我将得到相同的结果

我希望在组件100％加载后运行我的jQuery验证代码。

在我的项目中，我使用自定义元素和requirejs / text来解决此问题，因此尝试了以下方法：

<my-component data-bind="event: { descendantsComplete: $root.OnComponentReady() }"></my-component>

self.OnComponentReady = function()
{
    $("#myForm").validate ...
}

但是幸运的是，OnComponentReady可以正确执行，但是表单仍然不在DOM中。

这是当事情变得有趣的时候。在my-component中，我还有另一个组件，footer-component，它位于父组件的最底部，如果我将代码更改为下面的代码，则会得到正确的行为。

<my-component></my-component>

<footer-component data-bind="event: { descendantsComplete: $root.OnComponentReady() }"></footer-component>

像这样，当执行OnComponentReady时，表单可用，我可以将jQuery验证附加到该表单。如果将页脚组件移到我的组件的顶部，它也可以工作。

我的印象是，组件完成加载后，despantsantsComplete将触发，类似于jQuery的$(document).ready。不是这样吗？我不确定未来是否会有子组件，因此理想情况下，despantsantsComplete将附加到父组件。

编辑：我刚刚意识到，如果将.validate代码从我的主viewmodel（$ root）移到组件viewmodel，我将获得正确的行为，而没有despantsantsComplete事件。

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

相关问答