Question

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

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

如果我手动使用模板$("#rowTemplate").tmpl(item).appendTo($("tbody"))而Name 不是一个observable，那么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>

Answer 1

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

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

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

1 个答案: