我正在学习敲除,并试图弄清楚为什么分页不适用于我创建的可观察的数组。
此代码最初仅使用可观察到的数组,但是我发现计算的链接使编码和搜索进行搜索使代码变得更加容易。
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呼叫以推送数组中的产品之后运行此行,您只需要在加载数据