将 jquery ui 对话框与 knockoutjs 集成

Question

我正在尝试为 jquery ui 对话框创建 knockoutjs 绑定，但无法打开对话框。对话框元素已正确创建，但似乎有 display: none ，调用 dialog('open') 不会删除。此外，对 dialog('isOpen') 的调用返回对话框对象而不是布尔值。

我正在使用最新的knockoutjs 和jquery 1.4.4 以及jquery ui 1.8.7。我也用 jQuery 1.7.1 进行了尝试，得到了相同的结果。这是我的 HTML：

<h1 class="header" data-bind="text: label"></h1>

<div id="dialog" data-bind="dialog: {autoOpen: false, title: 'Dialog test'}">foo dialog</div>

<div>
    <button id="openbutton" data-bind="dialogcmd: {id: 'dialog'}" >Open</button>
    <button id="openbutton" data-bind="dialogcmd: {id: 'dialog', cmd: 'close'}" >Close</button>
</div>

这是 javascript：

var jQueryWidget = function(element, valueAccessor, name, constructor) {
    var options = ko.utils.unwrapObservable(valueAccessor());
    var $element = $(element);
    var $widget = $element.data(name) || constructor($element, options);
    $element.data(name, $widget);

};

ko.bindingHandlers.dialog = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            jQueryWidget(element, valueAccessor, 'dialog', function($element, options) {
                console.log("Creating dialog on "  + $element);
                return $element.dialog(options);
            });
        }        
};

ko.bindingHandlers.dialogcmd = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {          
            $(element).button().click(function() {
                var options = ko.utils.unwrapObservable(valueAccessor());
                var $dialog = $('#' + options.id).data('dialog');
                var isOpen = $dialog.dialog('isOpen');
                console.log("Before command dialog is open: " + isOpen);
                $dialog.dialog(options.cmd || 'open');
                return false;
            });
        }        
};

var viewModel = {
    label: ko.observable('dialog test')
};

ko.applyBindings(viewModel);

我已经设置了一个 JSFiddle 来重现问题。

我想知道这是否与 knockoutjs 和事件处理有关。我尝试从点击处理程序返回 true，但这似乎没有影响任何内容。

Answer 1

看起来像将小部件写入 .data("dialog") 然后尝试对其进行操作会导致问题。以下是一个示例，其中未使用 .data ，并且根据元素调用打开/关闭：http: //jsfiddle.net/rniemeyer/durKS/

另外，我喜欢以稍微不同的方式使用对话框。我喜欢使用可观察对象来控制对话框是打开还是关闭。因此，您可以在对话框本身上使用单个绑定。 init 将初始化对话框，而 update 将检查可观察对象以查看它是否应该调用打开或关闭。现在，打开/关闭按钮只需要切换布尔可观察值，而不用担心 ids 或定位实际的对话框。

ko.bindingHandlers.dialog = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            var options = ko.utils.unwrapObservable(valueAccessor()) || {};
            //do in a setTimeout, so the applyBindings doesn't bind twice from element being copied and moved to bottom
            setTimeout(function() { 
                options.close = function() {
                    allBindingsAccessor().dialogVisible(false);                        
                };

                $(element).dialog(options);          
            }, 0);

            //handle disposal (not strictly necessary in this scenario)
             ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                 $(element).dialog("destroy");
             });   
        },
        update: function(element, valueAccessor, allBindingsAccessor) {
            var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible),
                $el = $(element),
                dialog = $el.data("uiDialog") || $el.data("dialog");

            //don't call open/close before initilization
            if (dialog) {
                $el.dialog(shouldBeOpen ? "open" : "close");
            }  
        }
};

使用方式如下：

<div id="dialog" data-bind="dialog: {autoOpen: false, title: 'Dialog test' }, dialogVisible: isOpen">foo dialog</div>

这是一个示例：
http://jsfiddle.net/rniemeyer/SnPdE/

Answer 2

我对 RP Niemeyer 的答案做了一些更改，以允许对话框的选项可观察

http://jsfiddle.net/YmQTW /1/

使用 ko.toJS 获取可观察值以初始化小部件

setTimeout(function() { 
    options.close = function() {
        allBindingsAccessor().dialogVisible(false);                        
    };

    $(element).dialog(ko.toJS(options));          
}, 0);

并在更新时检查可观察值

//don't call dialog methods before initilization
if (dialog) {
    $el.dialog(shouldBeOpen ? "open" : "close");

    for (var key in options) {
        if (ko.isObservable(options[key])) {
            $el.dialog("option", key, options[key]());
        }
    }
}

Answer 3

在此处添加此内容是因为这是大多数人在搜索 jQuery UI Dialog 和 Knockout JS 问题时发现的内容。

这是避免上述答案中解释的“双重绑定”问题的另一种选择。对我来说， setTimeout() 导致其他需要初始化对话框的绑定失败。对我有用的简单解决方案是对接受的答案进行以下更改：

1. 使用自定义对话框绑定将 class='dialog' 添加到任何元素。

2. 在页面加载之后、调用 ko.applyBindings() 之前调用此方法：

   $('.dialog').dialog({autoOpen: false});

去掉自定义绑定的init里面的setTimeout，直接调用代码即可。

步骤 2 确保所有 jQuery UI 对话框都已在任何 KO 绑定之前初始化。这样 jQuery UI 已经移动了 DOM 元素，因此您不必担心它们在 applyBindings 中间移动。初始化代码仍然按原样工作（除了删除 setTimeout 之外），因为dialog()函数只会更新现有的对话框（如果已经初始化）。

我需要这个的一个例子是由于我用来更新对话框标题的自定义绑定：

ko.bindingHandlers.jqDialogTitle = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).dialog('option', 'title', value);
    }
};

我为此使用单独的绑定而不是主对话框绑定的更新函数，因为我只想更新标题，不是其他属性，例如高度和宽度（不希望对话框仅仅因为我更改标题而调整大小）。我想我也可以使用更新并仅删除高度/宽度，但现在我可以同时执行两者/任一操作，而不必担心 setTimeout 是否完成。

Answer 4

这是出色的 RP Niemeyer 绑定处理程序的变体，对于不同的场景很有用。

要允许实体的版本，您可以创建一个带有版本控件的

，并使用 with 绑定，这取决于专门为实体创建的可观察对象版。

例如，要允许编辑 person，您可以像 editedPerson 一样创建和观察，并创建一个带有编辑控件的 div，并使用如下绑定

data-bind="with: editedPerson"

：一个人对可观察者来说就像这样：

vm.editedPerson(personToEdit);

绑定使 div 可见。当你完成编辑后，你可以将 observable 设置为 null，就像这样

vm.editedPerson(null);

，div 将关闭。

我对 RP Niemeyer 的 bindingHandler 的变体允许在 jQuery UI 对话框中自动显示此 div。要使用它，您只需保留原始 with 绑定，并指定 jQuery UI 对话框选项，如下所示：

data-bind="with: editedPerson, withDialog: {/* jQuery UI dialog options*/}"

您可以获取我的绑定处理程序的代码，并在此处查看它的实际操作：

http://jsfiddle.net/jbustos/dBLeg/

您可以轻松修改此代码以使对话框具有不同的默认值，甚至让这些默认情况下，可以通过将处理程序封装在 js 模块中并添加公共配置函数来修改它来进行配置。 （您可以将此函数添加到绑定处理程序中，它将继续工作）。

// Variation on Niemeyer's http://jsfiddle.net/rniemeyer/SnPdE/

/*
This binding works in a simple way:
1) bind an observable using "with" binding
2) set the dialog options for the ui dialog using "withDialog" binding (as you'd do with an standard jquery UI dialog) Note that you can specify a "close" function in the options of the dialog an it will be invoked when the dialog closes.

Once this is done:
- when the observable is set to null, the dialog closes
- when the observable is set to something not null, the dialog opens
- when the dialog is cancelled (closed with the upper right icon), the binded observable is closed

Please, note that you can define the defaults for your binder. I recommend setting here the modal state, and the autoOpen to false.

*/

ko.bindingHandlers.withDialog = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            var defaults = {
                modal: false,
                autoOpen: false,
            };
            var options = ko.utils.unwrapObservable(valueAccessor());
            //do in a setTimeout, so the applyBindings doesn't bind twice from element being copied and moved to bottom
            $.extend(defaults, options)
            setTimeout(function() { 
                var oldClose = options.close;
                defaults.close = function() {
                    if (options.close) options.close();
                    allBindingsAccessor().with(null);                        
                };
                
                $(element).dialog(defaults);          
            }, 0);
            
            //handle disposal (not strictly necessary in this scenario)
             ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                 $(element).dialog("destroy");
             });   
        },
        update: function(element, valueAccessor, allBindingsAccessor) {
            var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().with),
                $el = $(element),
                dialog = $el.data("uiDialog") || $el.data("dialog");
            
            //don't call open/close before initilization
            if (dialog) {
                $el.dialog(shouldBeOpen ? "open" : "close");
            }  
        }
};
    
var person = function() {
    this.name = ko.observable(),
    this.age = ko.observable()
}

var viewModel = function() {
    label= ko.observable('dialog test');
    editedPerson= ko.observable(null);
    clearPerson= function() {
       editedPerson(null);
    };
    newPerson= function() {
        editedPerson(new person());
    };
    savePerson= function() {
        alert('Person saved!');
        clearPerson();
    };
    return {
        label: label,
        editedPerson: editedPerson,
        clearPerson: clearPerson,
        newPerson: newPerson,
        savePerson: savePerson,
    };
}


var vm = viewModel();

ko.applyBindings(vm);

.header {
    font-size: 16px;
    font-family: sans-serif;
    font-weight: bold;
    margin-bottom: 20px;
}

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"/>
<h1 class="header" data-bind="text: label"></h1>

<div id="dialog" data-bind="with: editedPerson, withDialog: {autoOpen: false, title: 'Dialog test', close: function() { alert('closing');} }">
    Person editor<br/>
    Name:<br/><input type="text" data-bind="value: $data.name"/><br/>
    Age:<br/><input type="text" data-bind="value: $data.age"/><br/>
    <button data-bind="click: $parent.savePerson">Ok</button>
    <button data-bind="click: $parent.clearPerson">Cancel</button>
</div>

<div>
    <button data-bind="click: clearPerson">Clear person</button>
    <button data-bind="click: newPerson">New person</button>
</div>

<hr/>

<div data-bind="text: ko.toJSON($root)"></div>

Answer 5

现在 这个库 包含 KnockoutJS 的所有 JQueryUI 绑定，包括当然，还有对话框小部件。