带剔除的简单 jquery-ui 对话框

Question

我在这里找到了一个很好的例子：http://jsfiddle.net/63tGP/39/ (from this question: Knockout bootstrap modal issue)，它允许用户通过打开 bootstrap 模式向层次结构添加项目。关键是使用敲除绑定处理程序。

我想这样做，只使用 jquery-ui 对话框。我在这里修改了 fiddle：http://jsfiddle.net/63tGP/40/；只有我得到非常奇怪的结果。有人可以帮我解决这个问题吗？

我修改了绑定处理程序，如下所示：

    ko.bindingHandlers.showModal = {
     init: function (element, valueAccessor) {
         $(element).dialog({ backdrop: 'static', keyboard: true, show: false });
     },
     update: function (element, valueAccessor) {
         var value = valueAccessor();
         if (ko.utils.unwrapObservable(value)) {
              $(element).dialog('open');
             $("input", element).focus();
         }
         else {

             $(element).dialog('close');
         }
     }
 };

最终目标是创建一个简单、可重复使用的组件，我可以将其用于层次结构的不同级别，以添加和编辑对象。

谢谢！

Answer 1

您的代码是正确的，但您忘记了几件事：

JQuery UI 需要 JQuery。
jquery-ui.js 需要 jquery-ui.css
您必须自己设置顺序。 jsfiddle 默认不会这样做。

如此正确的顺序：

jquery-ui.css
knockout.js
jquery.js
jquery-ui.js

所以，我按顺序放置脚本，您的示例开始工作：http://jsfiddle.net/zaj814kz/1/

另外我推荐给你使用 Require JS loader for avoid such dependency errors in future. All these libs: JQuery, JQuery UI, Knockout - support this loader by default. For example knockout 支持它在第 14 个字符串:

} else if (typeof define === 'function' && define['amd']) {

您不必担心必须设置文件的顺序。Require JS 会这样做 you.This 如果您使用库，它会为您节省很多时间。

带剔除的简单 jquery-ui 对话框

Simple jquery-ui dialog with knockout

jquery

jquery-ui

modal-dialog

knockout.js