Intent предназначен для того, чтобы пользователь мог щелкнуть по разделу логотипа и представить модальное диалоговое окно, в котором они могут загрузить новое изображение логотипа, изменить текущее изображение логотипа или удалить текущее изображение логотипа.jqueryUI modal dialog breaks knockoutjs bindings
Прямо сейчас изображение загрузки вызывает обновление страницы, но я перехожу к использованию сообщений ajax, которые обрабатывают эту функцию, чтобы предотвратить обновление страницы.
Проблема, с которой я сталкиваюсь, заключается в том, что после того, как изображение есть, а пользователь удаляет изображение, модальное диалоговое окно не обновляется после модели jockout js. Изображение отображается в двух областях, один раз на экране, где он должен быть, и еще раз в модальном диалоговом окне в качестве предварительного просмотра. Основное изображение src обновляется, и я могу скрывать, но похоже, что привязки между нокаутом и диалогом отбрасываются, когда jQueryUI клонирует элемент.
Я пытался использовать пример init из этого post, но модальный диалог не отображался.
Любые идеи?
HTML/Бритва
<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");
};
});