2017-12-12 6 views
0

ノックアウトを学び、私が作成した観測可能な配列に対してページングが機能しない理由を理解しようとしています。ノックアウト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です。

基本的に、データがロードされ、最初のページが正常に表示されていることがわかります。ページを切り替えると、最初のページに戻るまで元の配列のスライシングが機能しません。

私は、currentpageを観測可能にすることで、計算されたチェーンは変化しますが、それに沿ってプッシュしないという疑いがあります。

ありがとうございます。

+2

[スライス](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)関数は、開始インデックス、終了インデックス、開始インデックス、長さです。 –

+0

ああ、男!ありがとうございました。私は計算にリファクタリングしていたときにこれを逃してしまったに違いない。 – KonB

+0

ようこそ!それはたぶん私たち全員を1〜2回捉えたでしょう。 –

答えて

0

であなたの関数を置き換えます

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); 

だから、これはそのリスト数+あなたがそれぞれの時間を必要と実際のページサイズ内に存在する必要がある最初の項目からスライスすることによって、あなたのスライスを修正します。

EDIT: はまた、あなたのフィドルにself.Load()内の新製品をプッシュした後、このライン

self.CurrentPage(0); 

を削除し、押し込み製品にごko.utils.arrayForEach呼び出しの後に次の行を実行します配列を使用する場合は、データをロードした後で現在のページを一度設定する必要があります