我正在编写一段代码,将 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)新的 TInstance
到ViewModel
并且有效。
我遇到的问题是:当我有一个 <script src="..." />
里面TInstance
,
我想等到该脚本被下载和解析,然后执行 ko.applyBindings
.
所以我尝试了$(TInstance).ready(() => {ko.applyBindings(...)})
, 它在第一次加载页面时有效,但如果我重做整个过程,换入一个新的 TInstance
新 TInstance
上的就绪处理程序不会开火。
我该怎么办?
最佳答案
好的,这个答案不会是“复制和粘贴并播放”,它需要您进行一些调整,但我认为您会理解这个概念并且您会管理。
无需添加依赖管理模块,无需重构代码(通常纯脚本标签不会与 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/