jquery - 使用 Jquery 加载填充 jquery ui 对话框时的 knockout 绑定(bind)

Question

我确信我从根本上误解了这里的某些内容，但我一生都无法解决它。

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

然后我想应用 knockout 绑定(bind)。

我用一些简单的代码重新创建了我的问题。

主要 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

您需要确保在加载 Popup.html 的内容之后调用 ko.applyBindings() (因为 Ajax是 asynchronous 并且在继续 applyBindings() 调用之前不会等待内容加载。

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

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

参见load()