Jquery ui 将jquery ui对话框与knockoutjs集成
我正在尝试为jquery ui对话框创建knockoutjs绑定,但无法打开该对话框。dialog元素创建正确,但似乎有Jquery ui 将jquery ui对话框与knockoutjs集成,jquery-ui,jquery-ui-dialog,knockout.js,Jquery Ui,Jquery Ui Dialog,Knockout.js,我正在尝试为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="
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()会导致其他绑定失败,这些绑定要求对话框已经初始化。对我有效的简单解决方案是对公认的答案进行以下更改:
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*/}"