使用 Knockout.js 时 jQuery 模板中的空值呈现不正确答案

【问题标题】：null values in jQuery Templates rendered incorrectly when using Knockout.js使用 Knockout.js 时 jQuery 模板中的空值呈现不正确
【发布时间】：2011-11-18 13:38:09
【问题描述】：

担心这是一个错误，希望只是我自己：

我在 knockout.js 数据绑定中使用 jquery.tmpl 模板。该模板使用 jquery.tmpl 表示法绑定到属性：${Name}。事实证明，当 'Name' 属性为 null 时，模板会将 4 个字母的字符串 "null" 渲染到 HTML 中。这很尴尬。（注意：在这种情况下，名称是 ko.observable）。

如果我手动使用模板 $("#rowTemplate").tmpl(item).appendTo($("tbody")) 和 Name 是 not 一个可观察的然后 jQuery 模板呈现一个空字符串。这更像是我所期望的行为。

如果我使用以下方法在模板中进行空检查，则将整个内容进一步绘制：

{{if Name != null}}
    <input value="${Name}" />
{{/if}}

那么普通的 jQuery 模板不会渲染输入框。但是，当使用带有 knockout.js 的模板时，条件 Name != null 为 false，因为 Name 是可观察的。另一方面，{{if Name() != null}} 是无效的 jQuery 模板语法。

我没有找到解决此问题的任何方法。谁能告诉我如何正确使用 jQuery 模板和 knockout.js？还是我必须向淘汰项目报告错误？

示例 HTML 文档：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="knockout-1.3.0beta.js"></script>
    <script type="text/javascript" src="knockout.mapping-latest.js"></script>
</head>
<body>
    <table>
        <thead><tr><th>Name</th></tr></thead>
        <tbody data-bind="template: { name: 'rowTemplate', foreach: items }"> </tbody>
    </table>

    <script id="rowTemplate" type="text/x-jquery-tmpl">
        {{if Name != null}}
            <tr><td>${Name}</td></tr>
        {{/if}}
    </script>
    <script type="text/javascript">
        var rawItems = [{ "Name": null }, { "Name": "Me"}];
        var boundData = {
            items: ko.mapping.fromJS(rawItems)
        };

        $(document).ready(function () {
            // Knockout way:
            ko.applyBindings(ko.mapping.fromJS({ items: rawItems }));

            // Non-knockout way:
            //$.each(rawItems, function () {
            //    $("#rowTemplate").tmpl(this).appendTo($("tbody"));
            //});
        });
    </script>
</body>
</html>

【问题讨论】：

标签： knockout.js jquery-templates

【解决方案1】：

执行{{if Name() != null}} 甚至只是{{if Name()}} 是if 中的正确语法。 http://jsfiddle.net/rniemeyer/92ssx/。

否则，您可以切换到<td data-bind="text: Name"></td>，这至少会呈现空字符串。另一种选择是${Name() ? Name : ''}

【讨论】：

嗯，奇怪。正如我所说，我尝试了Name() != null，但我得到了一个例外
有特定的浏览器吗？你有问题吗？
不，在您在 Firefox 6.0.2 中执行的小提琴示例中，它似乎可以工作。我将再次查看我的代码。我在IE9中遇到了问题。我会在重试后立即更新。
重试了。有用。不知道上次是什么问题............我正在考虑删除这个问题 - 尽管它可能对未来的读者仍然有用。
知道它的支持范围是多少吗？ Android 手机 2.x 的原生浏览器不处理 null 属性，因此不会一起呈现页面。