ajax - 使用延迟加载或类似方法处理 knockout 中的大量数据

Question

我有一个可观察的数组ListingData，我用它来绑定(bind) HTML 表中的数据，使用如下所示的 knockout :

<tbody data-bind="foreach: ListingData">
    <tr>
        <!-- ko foreach: $parent.OrderedColumns -->
        <td>
            <span data-bind="text: $parent[$data]"></span>
        </td>
        <!-- /ko -->
    </tr>
</tbody>

OrderedColumns 是一个简单的数组，其中包含我用来动态绑定(bind)网格数据的列名。由于用户可以配置将在网格中显示的行数和列数，因此我使用上述语法。

用户最多可以配置 500 行和 50 列。我在单个 ajax 请求中获取 50 x 500 数据并将其存储到 ListingData 可观察数组中。我面临的问题是，当我为 ListingData 可观察数组设置值时，KO 将尝试生成 foreach 绑定(bind)中给定的所有 50 列和 500 行的标记立即导致浏览器挂起，并给出 Stop script/Continue script 信息。我测试了 50 列和 500 行，绑定(bind)数据大约需要 6-7 秒，在此期间浏览器会挂起。

我的问题是，当用户使用 knockout 滚动浏览 html 表格的 tbody 时，是否仍然可以生成标记？例如，在我的请求中，我将获取所有 50 列和 500 行，并将其存储到一个可观察数组中，在页面加载时，仅 10 或20 记录将对用户可见。当用户滚动 html 表时，我们需要使用可观察数组中已经存在的数据生成剩余记录的标记，而不是在用户每次向下滚动时调用 ajax 来获取剩余记录。滚动完所有 500 记录后，如果用户点击下一页，这次我们将发送一个 ajax 请求获取接下来的 500 条记录并仅显示 10 或 20 记录并在用户向下滚动 2nd 页面时生成标记。

有没有办法在 Knockout 中实现这一点，比如使用 knockout 模板 或按需加载 等？

Answer 1

如果您的问题是呈现大量元素，您可以使用客户端分页添加以下元素:

• CurrentPageRows(计算可观察)
• StartIndex Observable(页面第一行的索引)
• PageSize 可观察

CurrentPageRows 会根据当前的StartIndex 和PageSize 返回当前页面。

您还必须添加一些按钮/链接以转到下一页/上一页，这基本上会将 StartIndex 设置为您要转到的页面的计算索引:

StartIndex(math.floor ( PageNumber/PageSize ) + 1 )

关键是计算出的可观察值，它只会呈现所有记录的一个子集。