現在、私はノックアウト js を使用してユーザーをページに表示しています。ユーザー数が 250 ユーザーを超える可能性があるため、一度に 250 人すべてをロードしたくありません。時間がかかる。スクロール機能を使用するので、ユーザーがスクロールすると、表示するユーザーが増えます。
現在のコードは、250 または 500 の可能性があるすべてのユーザーの長さを取得し、ページごとに 20 を表示し、最後までページ分割します。
問題最初の 20 人のユーザーを表示するようにコードを変更し、ユーザーがスクロールすると次の 20 人を取得するようにコードを変更したいと思います。読み込み前にすべてのユーザーをカウントする必要はありません。
ノックアウト JS
var _rosterUsers = new Array();
$.views.Roster.RosterViewModel = function (data) {
var self = this;
self.RosterUsers = ko.observableArray([]);
_rosterUsers = self.RosterUsers;
self.currentPage = ko.observable(1);
self.toDisplay = ko.observable(20);
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) - 1 && 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);
},
$.views.Roster.RosterViewModel.AddUsers(data);
};
Knockout ファイルで JS をスクロールする
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
if (parseInt($.views.Roster.RosterViewModel.currentPage(), "10") * 20 < parseInt($.views.Roster.RosterViewModel.totalRoster(), "10")) {
$.views.Roster.RosterViewModel.next();
}
}
});