为了账号安全,请及时绑定邮箱和手机立即绑定

我怎样才能等到新创建的元素“准备好”(下载所有脚本)

我怎样才能等到新创建的元素“准备好”(下载所有脚本)

动漫人物 2021-10-14 13:31:51
我正在编写一段将 Sammy JS(路由器)和 Knockout JS 粘合在一起的代码。所以,这是我的问题,<script id="MyTemplate" type="text/html">     // [HTML Containing a script link (Encoded HTML)]</script>`我使用 jQuery 创建此模板的实例:var TInstance = $($("#MyTemplate").text())然后,我想将新的 htmlTInstance注入到我的<body>或其他现有标签中$("body").html(TInstance)一切都很好,现在我想做的是ko.applyBindings将 new 绑定TInstance到 anViewModel并且它可以工作。我遇到的问题是:当我有一个<script src="..." />inside 时TInstance,我想等到该脚本被下载和解析,然后执行ko.applyBindings.所以我试过了$(TInstance).ready(() => {ko.applyBindings(...)}),它在第一次加载页面时工作,但如果我重做整个过程,换入一个新TInstance的就绪处理程序就TInstance不会触发。我该怎么办?
查看完整描述

2 回答

?
MMMHUHU

TA贡献1834条经验 获得超8个赞

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


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


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


    var demoInterval = setInterval(function(){          

        if(myCondition){

            clearInterval(demoInterval );

            functionThatStartsTheRestOfTheLogicFlow();  // this could apply bindings etc etc

        }

    },50);

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


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


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


希望这可以帮助



查看完整回答
反对 回复 2021-10-14
  • 2 回答
  • 0 关注
  • 114 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信