jquery模板不刷新数据

Question

我正在使用 jquery 模板从 WCF 服务加载数据。见下面的代码

function loadTableDetails(id) {

    var input =
    {
        Id: id,
    };
    self.TableDetailList([]);
    return $.ajax({
        url: "../Service/Table/TableList",
        type: "PUT",
        contentType: 'application/json',
        processData: false,
        data: JSON.stringify(input),
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        },
        success: function(allData) {
            var mappedData = $.map(allData, function(item) {

                return new TableDetailData(item);
            });

            self.TableDetailList(mappedData);
            $("#instructorTemplate").tmpl(self.TableDetailList())
                                    .appendTo("#instructorsList");


        }
    });

}

我将其绑定到如下视图

<table id="Table1" style="width: 100%;">
    <colgroup>
        <col class="tblResultsCol1" style="width: 20px" />
        <col class="tblResultsCol2" style="width: 80px" />

        <col />
    </colgroup>
    <script id="instructorTemplate" type="text/x-jquery-tmpl">

        <tr>


            <td style="padding: 0px; text-align: left">${Id}</td>
            <td style="padding: 0px;">${ListName}</td>

        </tr>
    </script>

    <tbody id="instructorsList">
    </tbody>
</table>

我在按钮的单击事件上调用此函数 loadTableDetails 并从选定的组合框项传递 Id。它第一次正确加载数据。但是当用户在组合框中选择另一个项目时，它会将旧结果中的数据添加到新结果中。简而言之，它会继续从先前的结果中添加数据。在再次调用服务之前，我还尝试清空可观察数组 self.TableDetailList([])，但这没有帮助。

有什么想法吗？

Answer 1

在行中使用appendTo

$("#instructorTemplate").tmpl(self.TableDetailList())
                        .appendTo("#instructorsList");

您总是追加到现有表，因此新条目总是添加到末尾，而旧条目永远不会删除。

所以你需要先empty()你的目标，然后附加新值：

$("#instructorsList")
    .empty()
    .append($("#instructorTemplate").tmpl(self.TableDetailList());

或者你使用html()的方法来替换#instructorsList的全部内容

$("#instructorsList")
    .html($("#instructorTemplate").tmpl(self.TableDetailList());