jqueryUI 模态对话框打破了 knockoutjs 绑定答案

【问题标题】：jqueryUI modal dialog breaks knockoutjs bindingsjqueryUI 模态对话框打破了 knockoutjs 绑定
【发布时间】：2012-04-24 21:16:59
【问题描述】：

意图是让用户单击徽标部分并显示一个模态对话框，他们可以在其中上传新徽标图像、更改当前徽标图像或删除当前徽标图像。

现在上传图片会导致页面刷新，但我正在转向使用 ajax 帖子处理此功能来防止页面刷新。

我遇到的问题是，一旦图像存在，并且用户删除了图像，模态对话框在剔除 js 模型之后不会更新。图像显示在两个区域中，一次在屏幕上它应该在的位置，另一次在模式对话框中作为预览。主图像 src 更新，我可以隐藏，但是当 jQueryUI 克隆元素时，敲除和对话框之间的绑定似乎被删除了。

我试图使用 post 中的初始化示例，但模式对话框没有呈现。

有什么想法吗？

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");
        };
    });

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案1】：

我发现当我像你一样定义对话框时 - 即作为普通 div 绑定不起作用。然而，当我使用模板时，我可以使用 data 参数来指定我要绑定的项目，它将所有内容都纳入范围，包括我在视图模型上使用的其他项目。

看看 Ryan Niemeyer 的出色示例，它使用更新原始页面的对话窗口 http://jsfiddle.net/rniemeyer/WpnTU/

注意他是如何将对话框的内容定义为模板的。

【讨论】：

【解决方案2】：

您似乎没有设置 update 处理程序。查看此knockout tutorial，了解如何正确执行此操作。

【讨论】：