Question

我有一个评论表，我使用jsRender模板进行渲染。单击“添加注释”按钮时，将添加注释，并使用模板刷新显示注释的表，但是当发生这种情况时，将删除在页面本身以html编码的表头行。首次加载页面时，在执行模板之前，它们显示正常。我知道一旦模板渲染它们就会消失，但我看不出原因。

这是页面上的表格：

<table id="tblComments" width="98%" cellspacing="0" class="TableFormat">
<tbody>
    <tr>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; ">Comment</th>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; width:20%">Date Added</th>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; width:20%">Added By</th>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; width:24px"></th>
    </tr>
</tbody>

这是填充表格的ajax调用：

$.ajax({
    type: "Post",
    url: "ws.asmx/addComment",
    data: "{comment:" + JSON.stringify(comment) + ", ID:'" + ID + "', TypeID:" + TypeID + "}",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        var myData = data.d;
        $('#tblComments').html($.templates.Comments.render(myData));
        },
    complete: function() {
        $clickedControl.remove_loadingPhase();
    },
    error: function(xhr) {
        alert($.parseJSON(xhr.responseText).Message);
    }
});

这是模板本身：

$.templates('Comments',
'{{for}}' +
    '<tr>' +
       '<td style="vertical-align:top; text-align:left;">' +
           '<p style=" margin:3px 0;">' +
               '{{:comment}}' +
           '</p>' +
       '</td>' +
       '<td style=" vertical-align:top; text-align:left;">' +
           '{{:CreateDate}}' +
       '</td>' +
       '<td style=" vertical-align:top; text-align:left;">' +
           '{{:FullName}}<br />' +
           '{{:CommandVal}}' +
       '</td>' +
       '<td>' +
          '{{if isDel}}' +
               '<a onclick="deleteCmt(this)">' +
                   '<img style="border:0" src="/images/delete.png" alt="DELETE" title="Delete" />' +
               '</a><input type="hidden" id="delID" value="{{:CommentID}}" />' +
           '{{/if}} ' +
       '</td>' +
    '</tr>' +   
'{{/for}}');

以下是在呈现模板后页面源中的表格：

<table id="tblComments" width="98%" cellspacing="0" class="TableFormat">
<tbody>
    <tr>
        <td style="vertical-align:top; text-align:left;"><p style=" margin:3px 0;">testing 5</p></td>
        <td style=" vertical-align:top; text-align:left;">12/17/2013 4:45:40 PM</td>
        <td style=" vertical-align:top; text-align:left;">Hall, Samuel<br>American Greetings</td>
        <td><a onclick="deleteCmt(this)"><img style="border:0" src="/images/delete-icon.png" alt="DELETE" title="Delete"></a><input type="hidden" id="delID" value="eSknynCdbsE="> </td>
    </tr>
    <tr>
        ...additional rows print out below...
    </tr>
</tbody>

Answer 1

你实际上是这样做的：

var html = $.templates.Comments.render(myData);
$('#tblComments').html(html);

第二行正在替换作为'#tblComments'元素的目标<table>元素的innerHTML - 当然，您要删除标题行。

你可能想要：

<table width="98%" cellspacing="0" class="TableFormat">
<thead>
    <tr>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; ">Comment</th>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; width:20%">Date Added</th>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; width:20%">Added By</th>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; width:24px"></th>
    </tr>
</thead>
<tbody id="tblComments"></tbody>
</table>

我不确定你为什么{{for}} - 它没有做任何事情。

如果要将注释添加到上一组注释中，则需要管理注释数组并附加到注释数组。您可以使用JsViews动态插入行...

添加模板时，jsRender表标题行将丢失

1 个答案: