Question

我在这里找到了一个很好的例子：http://jsfiddle.net/63tGP/39/（来自这个问题：Knockout bootstrap modal issue）允许用户通过打开引导模式将项目添加到层次结构中。关键是使用淘汰绑定处理程序。

我想这样做，只使用jquery-ui对话框。我在这里修改了小提琴：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

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

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

正确的顺序：

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

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

另外，我建议您使用Require JS加载程序以避免将来出现此类依赖性错误。所有这些库：jquery-ui.css，JQuery，JQuery UI - 默认支持此加载器。例如knockout支持第14个字符串：

}否则if（typeof define ==='function'＆amp;＆amp; define ['amd']）{

您不必担心必须设置文件的顺序。Knockout会为您执行此操作。如果您使用该库，此库将为您节省大量时间。

简单的jquery-ui对话与淘汰赛

1 个答案: