jqueryUI模式对话框中断knockoutjs绑定

意图让用户点击一个标志部分，并在模式对话框中展示他们可以上传新标志图像，更改当前标志图像或删除当前标志图像。jqueryUI模式对话框中断knockoutjs绑定

现在上传图像会导致页面刷新，但我正在朝着使用ajax帖子处理此功能以防止页面刷新。

我遇到的问题是，一旦图像在那里，并且用户删除图像，模型对话框不会更新淘汰赛js模型后。图像显示为两个区域，一次显示在应该显示的屏幕上，再次显示在模式对话框中作为预览。主图像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"); 
     }; 
    });

来源

2012-04-24 Jerry