假设我们有一个简单的模型和视图模型：
// 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());
});
上面的代码工作，并将弹出一个带有文本框“abc”的jQuery窗口 .
但是，如果我在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将整个对话框设置放在文档的根级别，现在它在 ViewModel 的上下文之外 .
jQuery是否有一个选项可以不将整个对话框修复程序放在根级别？我可以采取不同的方法吗？ （我也尝试了自定义绑定路由，它也不会绑定 . 如果这样的div的内容是静态的（没有绑定），就像错误消息文本一样） .
1 回答
我在我的绑定集合中有一个对话框绑定 . 从逻辑中抽象DOM要好得多
https://github.com/AndersMalmgren/Knockout.Bindings
演示http://jsfiddle.net/H8xWY/130/