Question

我有一个可观察的数组ListingData，我用它来绑定HTML表中的数据，如下所示：

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

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

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

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

有没有办法在Knockout中实现这一点，比如使用knockout templates或on demand loading等？

Answer 1

如果您的问题是渲染了很多元素，您可以使用客户端分页添加以下元素：

CurrentPageRows（Computed Observable）
StartIndex Observable（页面第一行的索引）
PageSize Observable

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

您还需要添加一些按钮/链接转到下一页/上一页，它基本上将StartIndex设置为您想要去的页面的计算索引：

StartIndex（math.floor（PageNumber / PageSize）+ 1）

键是计算的observable，它只渲染所有记录的子集。

使用延迟加载或类似的东西处理敲除中的大量数据

1 个答案: