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

然后它可以工作文件（尽管像预期的那样有一点延迟），但这感觉不是“正确”的答案。这让我相信 applyBindings 运行得太快了，所以我尝试放入 $.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()