使用knockout.js更新jquery UI对话框的内容

我正在使用knockout.js和jquery的最新版本。我试图创建一个jquery对话框，只要特定的ko.observable具有值，就可以打开和关闭。我基于我在这个jsfiddle，http://jsfiddle.net/rniemeyer/WpnTU/，我在这个Knockout.js论坛，https://groups.google.com/d/msg/knockoutjs/XIaQMNHjy7Q/BpfDU5inKVQJ发现的代码的实现。使用knockout.js更新jquery UI对话框的内容

但是，这种方法只适用于如果我包括现在弃用jquery-tmpl.js插件（版本1.0.0pre）。我已将问题分解为两个jsfiddles，一个工作版本（http://jsfiddle.net/LhEnV/29/）和一个损坏的版本（http://jsfiddle.net/gygh3/1/）。唯一的区别是jquery-tmpl.js不包含在第二个版本中。

问题的根源在于，当我第一次加载页面时，对话框及其内容依赖的可观察性未设置。因此，模板绑定的属性不可用，这会导致错误。在淘汰赛前包括jquery-tmpl可以解决问题，所以我假设淘汰赛模板引擎会在jquery-tmpl可用时更改它的行为。但是，我不想依赖于已弃用的插件。

有没有更好的方法来绑定jQuery UI对话框，它的内容到ViewModel？

来源

2012-07-17 Phil G

你试过显式订阅observables改变，所以你把你的代码显示/隐藏对话框里面的“订阅”功能？ http://knockoutjs.com/documentation/observables.html 请参阅“显式订阅观察值”部分。 – 2012-07-17 20:43:11

不。我想保留我的DOM操作代码在自定义绑定，因为这似乎是淘汰赛的最佳做法。 Serjio的回答正是我所错过的。 – 2012-07-17 21:20:17

只要改变这一点：

<script id="newDialogTmpl" type="text/html"> 
    Add <span data-bind="text: displayName"></span>? 
</script>

要的是：

<script id="newDialogTmpl" type="text/html"> 
    <!-- ko if: $data --> 
    Add <span data-bind="text: displayName"></span>? 
    <!-- /ko --> 
</script>

在第一时间你newThing道具等于null所以它的触发REFFERENCE错误。你应该检查是否$data不为空然后渲染模板，如果为空 - 什么都不做

来源

2012-07-17 21:12:31 Serjio

啊，就是这样！很简单。你的解决方案在我的jsfiddle中工作，更重要的是它解决了我的实际代码中的问题。感谢您的快速响应！ – 2012-07-17 21:19:06

另一个提示是，你实际上可以把你的“if”作为模板绑定的一个选项，例如：'template：{template：{name：'newDialogTmpl'，'if'：newThing，data：newThing}'，那么你可以让它脱离你的模板。 jQuery模板引擎比原生引擎更容忍数据为空。我把'if'放在引号中，因为最后一次检查旧IE版本并不喜欢KO在该级别解析的'if'关键字。 – 2012-07-17 21:27:01

谢谢，这更好！ – 2012-07-17 21:38:18

使用knockout.js更新jquery UI对话框的内容

回答

相关问题