使用 Jquery 加载填充 jquery ui 对话框时的敲除绑定

Posted 2023-05-08

【中文标题】使用 Jquery 加载填充 jquery ui 对话框时的敲除绑定

【英文标题】：Knockout bindings when using Jquery load to fill a jquery ui dialog

【发布时间】：2016-07-18 13:50:35

【问题描述】：

我敢肯定，我从根本上误解了这里的某些东西，但我终其一生都无法解决。

我正在使用 jquery ui 对话框来创建表单弹出窗口。表单的视图位于单独的文件中，因此打开对话框时我使用 Jquery.load() 来填充对话框。

然后我想应用淘汰赛绑定。

我用一些简单的代码重现了我的问题。

主 html 文件：

<script src="knockout-3.4.0.js"></script>
<script src="Jquery/jquery-1.12.2.js"></script>
<script src="jquery-ui-1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="jquery-ui-1.11.4/jquery-ui.css"">

<script>
$(document).ready(function()

//initialise the dialog
$( "#dialog" ).dialog(
  modal: true,
  autoOpen: false
);


$("#btn").click(function()
    //open the dialog and load the html from the Popup page
    $("#dialog").load('Popup.html').dialog("open");



    //apply a simple binding to the container div in the Popup page
    ko.applyBindings( someText: "value from knockout", $("#container")[0] );


);

);
</script>

<button id="btn">Click</button>

<div id="dialog" style =  "display: none;">the hidden Div</div>

弹出的 html 文件：

<div id="container">

<p data-bind="text: someText">Default text in html popup</p>

</div>

如果我替换

ko.applyBindings( someText: "value from knockout", $("#container")[0] );

与

setTimeout(function() 
ko.applyBindings( someText: "value from knockout", $("#container")[0] );
,200);

然后它可以工作文件（尽管像预期的那样有一点延迟），但这感觉不是“正确”的答案。这让我相信 applyBindings 运行得太快了，所以我尝试放入 $.load() 的回调，但得到了相同的结果。

我是否遗漏了一些非常明显的东西？

【参考方案1】：

你需要确保ko.applyBindings()被调用在Popup.html的内容已经被加载（因为Ajax是asynchronous并且在继续之前不会等待内容被加载到applyBindings() 电话）。

最简单的方法是提供回调函数：

$("#dialog").load('Popup.html', function() 
    $(this).dialog("open");
    ko.applyBindings(someText: "value from knockout", $("#container")[0]);
)

见load()

【讨论】：

我不敢相信它这么简单！我以为我尝试了回调，但显然做错了什么！谢谢你，你把我的头从桌子上的任何刘海中拯救了出来（今天！）。