Asp.net mvc 4 如何使用knockout.js延迟加载mvc4 webgrid行？

我有一个包含大量行的web网格，我对网格分页不感兴趣。我最初只需要查看特定数量的行。然后，在滚动时，我需要逐个查看行。我在某个地方读到过，使用knockout.js是可能的。有人要分享示例代码吗？我正在使用MVC4Razor。

我实现了类似的控制。这是带有“加载更多”按钮的树状视图。 observable数组中的许多项可能会减慢应用程序的速度，尤其是在显示它们时，因为这需要大量的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;
    }
}

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

HTML模板：

$(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;
    }
}

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

---

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

请张贴一些代码，你有到目前为止！否则，如果您也在寻找一个示例：“要求我们推荐或查找工具、库或最喜爱的非现场资源的问题与堆栈溢出无关”，我没有任何代码。我是新来的击倒者。@Vishnu.V.S你打算如何获得你的数据？Ajax，JSON呈现，还有其他吗？我想用Ajax获取数据。@Vishnu.V.S我已经发布了基本示例。请检查一下！