如何解决KnockOutJS:后代的行为很奇怪完整和组件自定义元素
淘汰赛版本:3.5.1
<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 举报,一经查实,本站将立刻删除。