分页与敲除JS的计算阵列无法使用



我正在学习敲除,并试图弄清楚为什么分页不适用于我创建的可观察的数组。

此代码最初仅使用可观察到的数组,但是我发现计算的链接使编码和搜索进行搜索使代码变得更加容易。

http://jsfiddle.net/yustas2/sjleospx/16/

   self.PageSize = 3;
   self.CurrentPage = ko.observable(0);
   self.PageData = ko.computed(function() {
     //alert('current page*size' + self.CurrentPage() * self.PageSize + ' ' + self.PageSize);
     //alert(ko.toJSON(self.Products.slice(self.CurrentPage()*self.PageSize, self.PageSize)));
     return self.Products.slice(self.CurrentPage() * self.PageSize, self.PageSize);
   }, self);
   self.PageCount = ko.computed(function() {
     return Math.ceil(self.Products().length / self.PageSize);
   }, self);
   self.Pages = ko.computed(function() {
     return new Array(self.PageCount());
   }, self);
   self.GoToPage = function(data) {
     self.CurrentPage(data());
   };

我不知道我应该在这里粘贴多少代码,但是所有代码都在JSfiddle上。

基本上,我看到的是数据正在加载,并且首页显示正常。当我尝试切换页面时,直到我回到第一页之前,原始数组的切片不起作用。

我怀疑将电流页面作为可观察到的,尽管它确实发生了变化,但它不会推动计算的链。

谢谢。

用:

替换您的功能
self.PageData = ko.computed(function() { 
    var sliceFrom =self.CurrentPage()*self.PageSize; // this is the first for each page
    var sliceTo = (self.CurrentPage()*self.PageSize)+self.PageSize; // first of page + pageSize
    return self.Products.slice(sliceFrom ,sliceTo);
}, self);

因此,这可以修复您的切片,通过从该列表中的第一个项目切片来计数 您每次都需要的实际页面大小。

编辑:也在小提琴中删除此行

self.CurrentPage(0);

在self.load()中推新产品后,然后在您的ko.utils.arayforeach呼叫以推送数组中的产品之后运行此行,您只需要在加载数据

最新更新