jqueryUI模式对话框打破了knockoutjs绑定 [英] jqueryUI modal dialog breaks knockoutjs bindings

问题描述

意图是用户点击徽标部分并显示模式对话框，他们可以上传新徽标图像，更改当前徽标图像或删除当前徽标图像。

Intent is for the user to click on a logo section and be presented with a modal dialog where they can upload a new logo image, change the current logo image, or remove the current logo image.

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

Right now the upload image causes a page refresh, but I'm moving towards using ajax posts handle this functionality to prevent a page refresh.

我遇到的问题是，一旦图像出现，并且用户删除了图像，模拟对话框在淘汰赛js模型之后就不会更新。图像显示在两个区域中，一次显示在屏幕上，一次显示在模态对话框中作为预览。主图像src更新，我可以隐藏，但看起来当jQueryUI克隆元素时，淘汰和对话框之间的绑定被删除。

The issue I'm having is that once an image is there, and the user removes the image, the modal dialog box doesn't update after the knockout js model has. The image is displayed into two areas, once on the screen where it should be, and once again in the modal dialog as a preview. The main image src updates and I can hides, but looks like the bindings between knockout and the dialog are dropped when jQueryUI clones the element.

我试图使用init此发布的示例，但模态对话框没有渲染。

I was trying to use the init example from this post but the modal dialog didn't render.

任何想法？

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参数来指定我绑定到的项目，它将所有内容放入范围，包括我在viewmodel上使用的其他项目。

I found that when I defined the dialog as you have done - ie as a normal div The bindings would not work. When, however, I used a template I could use the data parameter to specify the item i was binding to which brought everything into scope including other items i was using on the viewmodel.

看看Ryan Niemeyer使用对话框窗口更新原始页面的优秀示例 http：// jsfiddle.net/rniemeyer/WpnTU/

Have a look at Ryan Niemeyer's excellent example of doing this with a dialog window which updates the original page http://jsfiddle.net/rniemeyer/WpnTU/

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

note how he has defined the content of the dialog as a template.

这篇关于jqueryUI模式对话框打破了knockoutjs绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！