假设我们有一个简单的模型和视图模型：
// Model
function Model(prop) {
this.Prop = ko.observable(prop);
}
// View Model
function ViewModel(){
var self = this;
this.CurrentItem = ko.observable(new Model("abc"));
this.Edit = function(){
$(#"EditDiv").dialog("show");
}
}
然后是html：
<body>
<input type="button" data-bind="click: Edit"/>
<div id="EditDiv" data-bind="with: CurrentItem">
<input type="text" data-bind="value: Property" />
</div>
</body>
然后页面底部的脚本：
$(document).ready(function(){
$("#EditDiv").dialog({ /* settings to hide it first. */ });
ko.applyBindings(new ViewModel());
});
上面的代码有效，并且会弹出一个带有文本框的 jQuery 窗口，其中包含文本“abc”。
但是，如果我将页面划分为 div 并为每个 div 分配不同的模型视图，则绑定会中断：
<body>
<div id="ForAnotherBindingContextDiv">
</div>
<div id="TargetContextDiv">
<input type="button" data-bind="click: Edit"/>
<div id="EditDiv" data-bind="with: CurrentItem">
<input type="text" data-bind="value: Property" />
</div>
</div>
</body>
所以现在我们将绑定更改为：
ko.applyBindings(new ViewModel(), $("#TargetContextDiv")[0]);
上面仍然会弹出编辑窗口，但是，文本框是空的。对我来说，这看起来像是绑定被破坏了，因为当我们调用 .dialog("show") 时，jQuery 将整个对话框设置放置在文档的根级别，这现在位于 .dialog("show") 的上下文之外ViewModel。
jQuery 是否可以选择不将整个对话框修复放在根级别？我可以采取不同的方法吗？（我也尝试了自定义绑定路由，它也不会绑定。如果这样的 div 的内容是静态的（没有绑定），它就可以工作，比如错误消息文本）。