Question

我正在尝试使用来自web服务的数据使用knockout.js绑定下表。一般工作，但我想修复3件事：

当我进行AJAX调用并返回数据时，我需要在ko.applyBindings(msg);之前清除表格。现在它只是保持addind和添加。
我有100个测试对象，在添加200/300后变得越来越慢。我希望表可能包含300条记录..编辑！实际上它似乎每行创建另外100行。所以，首先调用100行，然后调用10000行..
为了绑定我必须指定第一行。它显示在页面加载时，如何摆脱这一行？

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);

                // 
            }
        });
    }

Answer 1

首先，当使用Knockout时，你应该打电话ko.applyBindings()一次。初始化视图模型后，您将采取操作它的操作，允许Knockout的双向绑定动态更改您的UI。

这是一个模拟我认为你想要做的事情的小提琴。它初始化View Model，进行AJAX调用以加载前100行，然后允许用户单击refresh重新加载。

http://jsfiddle.net/jearles/aTuMv/

清除表格就像self.data([]);
您的行爆炸是因为多次调用ko.applyBindings()。
您可以使用if绑定

示例：

<table id="mainTable" class="paddedTable" data-bind="if: data().length > 0">

仅当数据包含元素

与knockout.js绑定表如何清除

1 个答案: