Kendo UI：从 URL 无限滚动加载答案

【问题标题】：Kendo UI: Endless scroll load from URLKendo UI：从 URL 无限滚动加载
【发布时间】：2014-03-04 11:44:21
【问题描述】：

我正在开发剑道 UI 中的无限滚动功能

到目前为止，我已经设法从 url 加载数据并显示在列表中，但是一旦我的列表结束，我需要从下一个 url 加载数据

这是我的代码

var i = 0, pageSize = 10;
function mobileListViewEndlessScrolling() {
        var dataSource = new kendo.data.DataSource({
      type: "odata",
            transport      : 
                    read: {
                        type       : "GET",
                        url        : "https://graph.facebook.com/siedae/feed?access_token=150129068491462|a8HxcqfRA-Bn1M59A_wefbEMs9c",
                        contentType: "application/json; charset=utf-8",
                        dataType   : "json",
                        error      : function (xhr, ajaxOptions, thrownError) {
                            alert("error " + xhr.responseText);
                        },
                    }
                },
            serverPaging: true,
            pageSize: pageSize,
            schema: {
                     data : "data",
                     total: function() { return 25; }
                    },
        });
        $("#endless-scrolling").kendoMobileListView({
            dataSource: dataSource,
            template: $("#endless-scrolling-template").text(),
            endlessScroll: true,
            scrollTreshold: 30,
            });
    }

【问题讨论】：

每页要显示多少项目？它应该是大致（项目* 3 * 2）。基本上，如果您在屏幕上显示 5 个项目，无限滚动需要在 DOM 中加载至少 15 个项目，因此 pageSize 应该是其两倍，即 30。
另外，为什么要对 schema.total 进行硬编码？这应该是动态的，并且包含将显示的所有记录的总数，与 pageSize 无关。

标签： kendo-ui kendo-mobile

【解决方案1】：

您可以将dataSource.transport.read.url 定义为一个函数。每次 dataSource 即将发出读取请求时，该函数都会执行，这将使您有机会在运行时更改 URL。

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.url

【讨论】：