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

Question

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

但是，这种方法只有在我包含现已弃用的 jquery-tmpl.js 插件（版本 1.0.0pre）时才有效。我将我的问题提炼为两个 jsfiddle，一个工作版本 (http://jsfiddle.net/LhEnV/29/) 和一个损坏的版本 (http://jsfiddle.net/gygh3/1/)。唯一的区别是 jquery-tmpl.js 不包含在第二个版本中。

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

有没有更好的方法将 jquery UI 对话框及其内容绑定到 ViewModel？

Answer 1

只要改变这个：

<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 所以它是触发引用错误。您应该检查 $data 是否不为空，如果为空则渲染模板 - 什么也不做