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

Question

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

我正在使用 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);

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

我是不是漏掉了一些很明显的东西？

Answer 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()

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

Knockout bindings when using Jquery load to fill a jquery ui dialog

jquery

jquery-ui

knockout.js

jquery-ui-dialog

jquery-load