Question

我有一个包含大量行的网格，我对分页网格不感兴趣。我最初只需要查看特定数量的行。然后在滚动时我需要一个接一个地查看行。我已经在某处阅读了 knockout.js 。有没有人可以分享示例代码？我正在使用MVC 4 Razor。

Answer 1

我实施了类似的控制。它是树状视图，带有“加载更多”按钮。可观察数组中的许多项可能会降低您的应用程序速度，尤其是当您显示它们时，因为它是很多DOM操作。

因此，我的所有数据都会在页面加载时推入普通数组。对于要显示的数据，我有KO可观察数组。当我需要显示它时，我将更多数据推送到一个可观察的数组中。

这是基本的例子：

<强>的JavaScript ：

$(function () {
    $.get("URL TO GET DATA FROM", function (data) {
        // data = [{name: "Andrei"}, {name: "James"}, {name: "Bill"}]
        var page = new PageModel(data);
        ko.applyBindings(page);
    });
});

function PageModel(data) {
    self = this;

    //Show items from this array on the page
    self.itemsToShow = ko.computed(function () {
        return self.allItems.slice(0, self.numberToShow);
    });
    self.numberToShow = 10;
    self.allItems = data;
    self.showMore = function () {
        self.numberToShow += 10;
    }
}

HTML模板：

<div data-bind="foreach: itemsToShow">
    <span data-bind="text: name"></span>
</div>

如果您需要显示更多项目，可以只调用page.showMore（）;

如何使用knockout.js延迟加载mvc4 webgrid行？

1 个答案: