Question

这是我的挖空组件，它显示包含一些数据的表格。（我已经简化了它，因为我可以更容易理解它）

当数据数组中的行数不多时，它可以正常工作，但是如果有1.5万行或更多行，如果我翻阅所有页面然后崩溃并且内存不足，则会冻结＃34;错误信息。

可能导致错误的原因是什么？有办法解决这个问题吗？

ko.components.register("table-pg", {
    viewModel: function(params) {
        // params
        this.pageSize = +params["pageSize"];
        this.allItems = ko.utils.unwrapObservable( params["values"] );
        this.columns = ko.observableArray( params["columns"] );

        this.totalPagesCount = ko.pureComputed(function () {
            return Math.ceil(this.allItems.length / this.pageSize);
        }, this);

        this.pageNum = ko.observable(0);

        this.items = ko.pureComputed(function () {
            var startIndex = this.pageSize * this.pageNum();
            return this.allItems.slice(startIndex, startIndex + this.pageSize);
        }, this);

        this.gotoNextPage = function () {
            var pn = this.pageNum();
            if (pn < this.totalPagesCount() - 1) this.pageNum(pn + 1);
        }
    },
    template:' \
        <div> \
            <table> \
                <tbody data-bind="foreach: items"> \
                    <tr class="value-item" data-bind="foreach: $component.columns"> \
                        <td data-bind=" \
                            text: ko.pureComputed( function () { \
                                return $parent.property($data).value()  \
                            } ), \
                        "></td> \
                    </tr> \
                </tbody> \
            </table> \
            \
            <a href="#next" data-bind="click: gotoNextPage, text: nextPageTitle"></a> \
        </div> \
        '
});

Answer 1

问题在于模板，因为您要在每列中创建许多pureComputed。如果你有6列和1.5k项目，这将产生大约9000个功能，这是很多。尝试使用ff：

<td data-bind="text: $parent.property($data).value()"></td>

我认为这就足够了。

Knockout分页组件崩溃。为什么？

1 个答案: