Mic*_*uso 0 data-binding jquery dialog modal-dialog knockout.js
假设我们有一个简单的模型和视图模型:
// 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的内容是静态的(没有绑定),就像错误消息文本一样).
我在我的绑定集合中有一个对话框绑定.从逻辑中抽象DOM要好得多
https://github.com/AndersMalmgren/Knockout.Bindings
演示 http://jsfiddle.net/H8xWY/130/
<div id="dialog" data-bind="dialog: { autoOpen: false, modal: true, title: dialogTitle }, template: { name: 'dialog-template', data: dialogItem, 'if': dialogItem }, openDialog: dialogItem"></div>
| 归档时间： |
|
| 查看次数： |
5163 次 |
| 最近记录： |