нулевые значения в шаблонах jQuery отображаются неправильно при использовании Knockout.js - PullRequest
Новая
       2

нулевые значения в шаблонах jQuery отображаются неправильно при использовании Knockout.js

2 голосов
/ 16 сентября 2011

Опасаясь, что это ошибка, надеюсь, что это только я:

Я использую шаблон jquery.tmpl в привязке данных knockout.js.Шаблон использует нотацию jquery.tmpl для привязки к свойствам: ${Name}.Оказывается, что когда свойство «Имя» имеет значение null, шаблон отображает 4-буквенную строку "null" в HTML.Это неудобно.( Примечание: В данном случае имя является ko.observable).

Если я использую шаблон вручную, $("#rowTemplate").tmpl(item).appendTo($("tbody")) и Name - это , а не , которое можно наблюдатьШаблон jQuery отображает пустую строку.Это гораздо больше похоже на поведение, которое я ожидаю.

Рисуем все это на шаг дальше, если я сделаю нулевую проверку в шаблоне, используя: 

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

Затем обычныйШаблон jQuery не отображает поле ввода.Однако при использовании шаблона с knockout.js условие Name != null является ложным, поскольку 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>

1 Ответ

3 голосов
/ 16 сентября 2011

Выполнение {{if Name() != null}} или даже просто {{if Name()}} - правильный синтаксис в if.http://jsfiddle.net/rniemeyer/92ssx/.

В противном случае вы можете переключиться на <td data-bind="text: Name"></td>, что по крайней мере отобразит пустую строку.Еще одна альтернатива - сделать ${Name() ? Name : ''}

...