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。它首次正确加载数据。但是当用户在combox中选择另一个项目时，它会将旧结果中的数据添加到新结果中。简而言之，它不断添加先前结果的数据。在我再次呼叫服务之前，我还试图清空可观察数组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());

jquery模板没有刷新数据

1 个答案: