javascript - 我怎么能等到新创建的元素是 "ready"(所有脚本都已下载)

标签 javascript jquery html knockout.js

我正在编写一段代码,将 Sammy JS(路由器)和 Knockout JS 粘合在一起。

所以,这是我的问题,

<script id="MyTemplate" type="text/html"> 
    // [HTML Containing a script link (Encoded HTML)]
</script>`

我使用 jQuery 创建此模板的实例:

var TInstance = $($("#MyTemplate").text())

然后,我想注入(inject)新的html TInstance进入我的<body>或其他现有标签

$("body").html(TInstance)

很好,现在我想做ko.applyBindings绑定(bind)新的 TInstanceViewModel并且有效。

我遇到的问题是:当我有一个 <script src="..." />里面TInstance , 我想等到该脚本被下载和解析,然后执行 ko.applyBindings .

所以我尝试了$(TInstance).ready(() => {ko.applyBindings(...)}) , 它在第一次加载页面时有效,但如果我重做整个过程,换入一个新的 TInstanceTInstance 上的就绪处理程序不会开火。

我该怎么办?

最佳答案

好的,这个答案不会是“复制和粘贴并播放”,它需要您进行一些调整,但我认为您会理解这个概念并且您会管理。

无需添加依赖管理模块,无需重构代码(通常纯脚本标签不会与 html 一起动态注入(inject),原因与您现在遇到的问题相同。使用 html 加载脚本标签是个好主意第一个页面加载,但之后添加的任何内容,特别是如果需要一些流程,都需要编程处理,因此需要模块管理框架来支持更大的项目)

一种方法是停止您的代码执行流程并轮询环境以查看您的脚本是否已加载。即:

    var demoInterval = setInterval(function(){          
        if(myCondition){
            clearInterval(demoInterval );
            functionThatStartsTheRestOfTheLogicFlow();  // this could apply bindings etc etc
        }
    },50);

现在例如,如果您使用脚本标记加载 jQuery,您的条件可能是 typeof($) !== '未定义' 它会每 50 毫秒轮询一次,直到 $ 被定义,然后它会调用一个函数来清除轮询并继续您的逻辑流程。

在您的情况下,条件可能是函数/模型的定义,您的自定义 js 文件可以设置的类似标志的变量,轮询预计会在某个时间点读取等等。

更好的方法是从 html 中删除脚本标签并通过 javascript 动态加载脚本,以便您可以利用所需特定脚本的 onload 事件,您可以阅读示例 here .对于开发人员而言,以编程方式控制这些情况要容易得多。

希望对你有帮助

关于javascript - 我怎么能等到新创建的元素是 "ready"(所有脚本都已下载),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57905897/

相关文章:

javascript - 表单验证集自定义有效性

javascript - 使用canvas根据相机绘制网格

javascript - jQuery 父类属性

javascript - jquery超链接特性

javascript - 根据父位置滚动 div

javascript - 在主干中呈现 html 不起作用

jquery - 使用自定义宽高,jQuery Mobile Dialog center to screen

javascript - 如何使菜单链接返回到索引页面并滑动到特定高度?

javascript - 执行前等待链接点击弹出结果

javascript - 使用 Vue.js 的可滚动表格