jquery - ノックアウト.jsでバインディングテーブルをクリアする方法

Question

Web サービスから取得したデータを使用して、knockout.js を使用して次のテーブルをバインドしようとしています。一般的には機能しますが、次の 3 つの点を修正したいと思います。

1. AJAX 呼び出しを行ってデータが戻ってきたら、前にテーブルをクリアする必要がありますko.applyBindings(msg);。今のところ、追加と追加を続けています。

2. 100 個のテスト オブジェクトがありますが、200/300 を追加すると、ますます遅くなります。テーブルには 300 レコードが含まれている可能性があると思います.. 編集! 実際には、各行に対してさらに 100 行を作成するようです。したがって、最初に 100 行を呼び出し、次に 10000 行を呼び出します。

3. バインドするには、最初の行を指定する必要がありました。ページが読み込まれたときに表示されます。この行を削除するにはどうすればよいですか?

HTML:

<table id="mainTable" class="paddedTable">
            <thead>
                <tr>
                    <th style="width: 70px;">Trip No</th>
                    <th style="width: 26px;"><img src="/images/attachment_header.png" alt="Attachments"/></th>
                    <th style="width: 70px;">PO No</th>
                    <th style="width: 70px;">BOL No</th>
                    <th style="width: 70px;">Shipper No</th>
                    <th style="width: 100px;">From</th>
                    <th style="width: 100px;">To</th>
                    <th style="width: 100px;">Scheduled Pickup</th>
                    <th style="width: 100px;">Scheduled Delivery</th>
                    <th style="width: 120px;">Status</th>
                    <th style="width: 40px;">&nbsp;</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: d">
                <tr class="dataRow">
                    <td data-bind="text: TripId"></td>
                    <td><img src="/images/pdf_icon24.png" alt="PDF Document"/></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>tracking stuff</td>
                    <td><a href="#" class="infoLink"><strong>Info</strong></a></td>
                </tr>    
            </tbody>

脚本：

function onRefreshButtonClick() {
        $.ajax({
            type: "POST",
            url: "/Customer/TrackShipment.aspx/GetShipments",
            data: "{ dateFrom: '" + $("#FromDateTextBox").val() + "', dateTo: '" +  $("#ToDateTextBox").val() + "' }",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                var a = msg.d;


                ko.applyBindings(msg);

                // 
            }
        });
    }