3
インテントは、ユーザーがロゴセクションをクリックし、新しいロゴイメージをアップロードしたり、現在のロゴイメージを変更したり、現在のロゴイメージを削除したりするモーダルダイアログを表示します。jqueryUIモーダルダイアログがノックアウトバインディングを中断する
今、アップロードイメージはページの更新を引き起こしますが、私はajax投稿の使用に向けてこの機能を処理し、ページの更新を防ぎます。
問題は、イメージがそこにあり、ユーザーがイメージを削除すると、ノックアウトjsモデルの後にモーダルダイアログボックスが更新されないということです。画像は2つの領域に表示されます。一度は画面上に表示され、再度モーダルダイアログではプレビューとして表示されます。メインイメージsrcが更新され、隠すことができますが、jQueryUIが要素をクローンするときにノックアウトとダイアログの間のバインディングが削除されるように見えます。
このpostのinitの例を使用しようとしましたが、モーダルダイアログが表示されませんでした。
アイデア？
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");
};
});