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

【问题标题】：How to Lazy load mvc4 webgrid rows using knockout.js ?如何使用 knockout.js 延迟加载 mvc4 webgrid 行？
【发布时间】：2014-01-03 13:25:43
【问题描述】：

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

【问题讨论】：

请发布一些您目前拥有的代码！否则，如果您还在寻找示例：“要求我们推荐或查找工具、库或最喜欢的场外资源的问题与 Stack Overflow 无关”
我没有任何代码。我是淘汰赛的新手..

标签： asp.net-mvc-4 razor knockout.js webgrid

【解决方案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();

【讨论】：

@Vishnu.V.S 您将如何获取数据？ Ajax、JSON 渲染，还有什么？
我想使用ajax获取数据。
@Vishnu.V.S 我已经发布了基本示例。请检查一下！