javascript - 使用knockout js滚动显示分页

Question

我想使用knockout js来启用滚动分页

问题
我想将 url 和 id 传递到我的 `GetPage(controller, id#, page#)) 目前它是硬编码的，但我想改变它。

knockout js

   $.views.Roster.GetPage = function (url, id, pageNumber) {
        $.grain.Ajax.Get({
            Url: url,
            SectionID: {id:id},
            DataToSubmit: { pageNumber: pageNumber, id: id },
            DataType: "json",
            OnSuccess: function (data, status, jqXHR) {
                $.views.Roster.RosterViewModel.AddUsers(data);

            }
        });
    };

Next = function () {
        var _page = $.views.Roster.ViewModel.CurrentPage() + 1;
        $.views.Roster.ViewModel.CurrentPage(_page);
        $.views.Roster.GetPage("/api/Roster", 9, _page);
    }

滚动分页

$(document).ready(function(){
    $('#main').scroll(function () {

        if ($('#main').scrollTop() >= $(document).height() - $('#main').height()) {
            $('#status').text('Loading more items...' + $.views.Roster.ViewModel.TotalRoster());
            if ($.views.Roster.ViewModel.RosterUsers() == null ) {
                $('#status').hide();
                $('#done').text('No more items...'),
                $('#main').unbind('scroll');
            }
            setTimeout(updateStatus, 2500);
        }
        //updateStatus();
    });
});

Answer 1

将 getRoster 函数中的数据更改为服务器函数期望返回的数据。另外，删除代码 $.views.Roster.GetRoster，它不再需要了。现在，当您执行 ko.applyBindings(new $.views.Roster.RosterViewModel()); 时您应该获取第一页数据，随后，当您滚动时， View 模型上的 next() 调用将继续分页。这个逻辑就是你。

$.views.Roster.RosterViewModel = function (data) {
    var self = this;
    self.RosterUsers = ko.observableArray([]);
    _rosterUsers = self.RosterUsers;
    self.currentPage = ko.observable(1);
    self.toDisplay = ko.observable(10);

    var filteredRoster = ko.computed(function(){
        var init = (self.currentPage()-1)* self.toDisplay(),
            filteredList = [],
            rosterLength = self.RosterUsers().length,
            displayLimit = self.toDisplay();
        if(rosterLength == 0)
            return[];
        for(var i = init; i<(displayLimit + init)  && i<rosterLength; i++)
        {
            filteredList.push(self.RosterUsers()[i]);
        }
        return filteredList;
    }),
    totalRoster = ko.computed(function () {
        return self.RosterUsers().length;
    }),
    changePage = function (data) {
        self.currentPage(data);
    },
    next = function () {
        if ((self.currentPage() * self.toDisplay()) > self.RosterUsers().length)
            return;

        self.currentPage(self.currentPage() + 1);
    },
    prev = function () {
        if (self.currentPage() === 1)
            return;

        self.currentPage(self.currentPage() - 1);
    },
    getRoster = ko.computed(function () {
        var data = {
            currentPage: self.currentPage(),
            pageSize: self.toDisplay()
        },
            $promise = _makeRequest(data);

        $promise.done(function (data) {
            var localArray = [];
            ko.utils.arrayForEach(data, function(d){
                localArray.push(new $.views.Roster.UserViewModel(d));
            });
            self.RosterUsers.push.apply(self.RosterUsers,localArray);
        });

    }),
        _makeRequest = function(data){
            return $.getJSON('your url here', data);
        };



};