微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?