1

我正在尝试使用从 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);

                // 
            }
        });
    }
4

1 回答 1

3

首先，在使用 Knockout 时，您的目标应该是跟注ko.applyBindings()一次。初始化视图模型后，您将执行操作它的操作，允许 Knockout 的双向绑定动态更改您的 UI。

这是一个示例小提琴，它模拟了我认为您正在尝试做的事情。它初始化视图模型，进行 AJAX 调用以加载前 100 行，然后允许用户单击刷新以重新加载。

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

  1. 清表很简单self.data([]);

  2. 您的行爆炸是因为ko.applyBindings()多次调用。

  3. if您可以使用绑定禁用表格呈现

例子：

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

仅当数据具有元素时才会呈现表格

于 2013-04-13T01:42:23.430 回答