jqueryUI 模态对话框会破坏 Knockoutjs 绑定
jqueryUI modal dialog breaks knockoutjs bindings
意图是让用户单击徽标部分并显示一个模式对话框,他们可以在其中上传新的徽标图像、更改当前徽标图像或删除当前徽标图像。
现在上传图像会导致页面刷新,但我正在转向使用 ajax 帖子处理此功能来防止页面刷新。
我遇到的问题是,一旦图像存在,并且用户删除了图像,模态对话框在挖空 js 模型之后不会更新。图像显示为两个区域,一个在屏幕上应有的位置,另一个作为预览显示在模式对话框中。主图像 src 更新,我可以隐藏,但看起来当 jQueryUI 克隆元素时,挖空和对话框之间的绑定被删除了。
我试图使用这篇文章中的 init 示例,但模态对话框没有呈现。
有什么想法吗?
HTML/Razor
<div id="logo" data-bind="cmdDialog: {id:'dialog-form', cmd:'open'} ">
<div id="changeLogo">
<h1 data-bind="visible: URL() == null"><span>Logo Here</span></h1>
<img data-bind="attr: { src: URL}, visible: URL() != null"/>
</div>
<div id="dialog-form" data-bind="setDialog:{}">
<img data-bind="attr: { src: URL}"/>
<button type="button" data-bind="visible: URL() != null, deleteImage: ImageID">Remove Image</button>
<hr/>
<form action="uploadImage" method="post">
@Html.HiddenFor(m => m.ID, new { data_bind = "value: ID" })
@Html.HiddenFor(m => m.ImageID, new { data_bind = "value: ImageID" })
<div>
<input type="file" name="file" id="file"/>
</div>
<div>
<input type="submit" value="Upload" />
<button type="button" data-bind="cmdDialog: {id:'dialog-form', cmd:'close'} ">Cancel</button>
</div>
</form>
</div>
</div>
JavaScript
$(document).ready(function () {
/*************************************/
// Modal Dialog config
/*************************************/
var options = {
autoOpen: false,
resizable: false,
modal: true,
height: 400,
width: 450
};
/*************************************/
// Knockout config
/*************************************/
var viewModelLogo;
ko.bindingHandlers.setDialog = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var $element = $(element);
setTimeout(function() {$element.dialog(options); }, 0);
}
};
ko.bindingHandlers.cmdDialog = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).click(function() {
var parms = ko.utils.unwrapObservable(valueAccessor());
var $logoForm = $('#' + parms.id);
$logoForm.dialog(parms.cmd);
});
}
};
ko.bindingHandlers.deleteImage = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).click(function() {
deleteImage(viewModel);
});
}
};
$.getJSON("/Logo/Logo/GetPageModel", Model.ID, function(result) {
updateModel(result.Data);
});
var deleteImage = function(imageModel) {
var image = ko.toJS(imageModel);
$.post("/Logo/Logo/deleteImage", image, function(result) {
updateModel(result.Data);
});
};
function updateModel(image) {
viewModelLogo = ko.mapping.fromJS(image);
ko.applyBindings(viewModelLogo, document.getElementById('logo'));
$('#dialog-form').dialog("close");
};
});
我发现当我像您一样定义对话框时 - 即作为普通的div 绑定不起作用。但是,当我使用模板时,我可以使用 data 参数来指定我绑定到的项目,它将所有内容都纳入范围,包括我在视图模型上使用的其他项目。
看看Ryan Niemeyer的很好的例子,它有一个对话框窗口来更新原始页面 http://jsfiddle.net/rniemeyer/WpnTU/
请注意他如何将对话框的内容定义为模板。
看起来您没有设置update
处理程序。查看此淘汰教程,了解如何正确执行此操作。
相关文章:
- 使用KnockoutJS绑定的YUI DataTable
- KnockoutJS绑定每个文档不止一次
- 用于动态引导工具提示的自定义KnockoutJS绑定处理程序
- 将tinyMCE与knockoutjs绑定
- 如何使用knockoutjs绑定嵌套输入
- 使用knockoutjs绑定和显示字典
- 在knockoutjs绑定中使用setters函数
- Knockoutjs 绑定到复杂的 html 对象
- Knockoutjs 绑定对象问题
- KnockoutJS 绑定在我的视图模型实际创建之前应用
- KnockoutJS绑定到键/值对
- KnockoutJS 绑定来自 AJAX 调用的对象列表
- jqueryUI 模态对话框会破坏 Knockoutjs 绑定
- 如何在Telerik编辑器上使用knockoutjs绑定
- 模板渲染后的KnockoutJS绑定事件
- KnockoutJS绑定不使用映射插件进行更新
- Knockoutjs:绑定到模板中数组之外的一个可观察属性
- 选择列表中的KnockoutJs绑定问题
- Knockoutjs绑定问题与表
- 如何从整个穹顶中移除knockoutjs绑定