Jquery ui 将jquery ui对话框与knockoutjs集成

我正在尝试为jquery ui对话框创建knockoutjs绑定，但无法打开该对话框。dialog元素创建正确，但似乎有

display:none

，调用

dialog（'open'）

不会删除该元素。此外，对

对话框（'isOpen'）

的调用将返回对话框对象，而不是布尔值

我在jQueryUI1.8.7中使用最新的knockoutjs和jQuery1.4.4。我还使用jQuery1.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>

我已经建立了一个复制问题的模型

---

我想知道这是否与knockoutjs和事件处理有关。我尝试从单击处理程序返回

true

，但这似乎没有影响任何内容。

似乎是将小部件写入.data（“对话框”），然后尝试对其进行操作导致了问题。下面是一个示例，其中未使用

.data

，并根据元素调用打开/关闭：

或者，我喜欢以稍微不同的方式使用对话框。我喜欢通过使用一个可观察对象来控制对话框是打开还是关闭。因此，可以对对话框本身使用单个绑定。

init

将初始化对话框，而

update

将检查一个可观察对象，看它是否应该调用open或close。现在，打开/关闭按钮只需要切换一个布尔可观察值，而不用担心ID或实际对话框的位置

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>

foo对话框

以下是一个示例：

---

将此添加到此处，因为这是大多数人在使用jQuery UI Dialog和Knockout JS搜索问题时发现的

这只是避免上述答案中解释的“双重约束”问题的另一种选择。对我来说，setTimeout（）会导致其他绑定失败，这些绑定要求对话框已经初始化。对我有效的简单解决方案是对公认的答案进行以下更改：

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

在页面加载之后，但在调用ko.applyBindings（）之前调用此函数：

$（'.dialog'）.dialog（{autoOpen:false}）

删除自定义绑定的

init

中的

setTimeout

，直接调用代码即可

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

我之所以需要它，是因为我使用自定义绑定来更新对话框的标题：

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

---

我使用一个单独的绑定，而不是主对话框绑定的更新函数，因为我只想更新标题，而不想更新其他属性，如高度和宽度（不要因为我更改了标题而调整对话框的大小）。我想我也可以使用update，只删除高度/宽度，但现在我可以同时执行这两项/其中一项，而不必担心设置超时是否完成。

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

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

setTimeout（函数（）{
options.close=函数（）{
allBindingsAccessor（）.dialogVisible（false）；
};
$（element.dialog（ko.toJS（options））；
}, 0);

并在更新时检查观察值

//初始化之前不要调用对话框方法
如果（对话框）{
$el.对话框（应打开？“打开”：“关闭”）；
for（变量输入选项）{
if（可维护（选项[键]）{
$el.dialog（“option”，key，options[key]（））；
}
}
}

现在有了所有用于KnockoutJS的JQueryUI绑定，当然包括对话框小部件。

这是伟大的RP Niemeyer绑定处理程序的变体，对于不同的场景非常有用

要允许对实体进行编辑，您可以使用编辑控件创建

，并使用带有绑定的

，这取决于为编辑专门制作的可观察到的

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

data-bind="with: editedPerson"

当您将一个人添加到可观察lke时，因此：

vm.editedPerson(personToEdit);

绑定使
div
可见。完成编辑后，您可以将observable设置为null，如下所示

vm.editedPerson(null);

div
将关闭

我的RP Niemeyer bindingHandler变体允许在jQueryUI对话框中自动显示此div。要使用它，只需使用

绑定保留原始的

，并指定jQuery UI对话框选项，如下所示：

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

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


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


//尼迈耶的变异http://jsfiddle.net/rniemeyer/SnPdE/
/*
此绑定的工作方式很简单：
1） 使用“with”绑定来绑定可观察对象
2） 使用“withDialog”绑定设置ui对话框的对话框选项（与标准jquery ui对话框一样）。注意，可以在对话框选项中指定“close”函数，当对话框关闭时将调用该函数。
完成后：
-当observable设置为null时，对话框关闭
-当observable设置为非null时，对话框打开
-当对话框打开时
data-bind="with: editedPerson, withDialog: {/* jQuery UI dialog options*/}"