2

Knockout.JS を使用して投稿のリストを表示するプロジェクトを継承しました。クライアントは、このリストにページ番号を付けることを要求しました。これが可能であり、Knockout.JS を使用して適切かどうか疑問に思っています。これは純粋な JavaScript で簡単に実現できますが、一貫性を保つために (適切であれば) Knockout を使用したいと考えています。

私が知る限り、このページはページの HTML でネイティブ テンプレートを使用しています。投稿を投稿モデルに格納するViweModelがありko.ObservableArray()ます。

データは jQuery ajax 呼び出しを介してロードされ、返された JSON はポスト モデル オブジェクトにマップされ、データバインディングを処理する ObservableArray に渡されます。

ViewModel を修正して、ページネーション リンク (必要に応じて「前」と「次」のリンクを含む) をバインドすることは可能ですか、それともプレーンな JS でこれを記述したほうがよいでしょうか?

4

3 に答える 3

2

完全なページリストの「ウィンドウ」を表示するノックアウトで計算されたオブザーバブルを構築するのは簡単なはずです。たとえば、ビュー モデルに追加します。

this.pageIndex = ko.observable(1);
this.pagedList = ko.computed(function() {
   var startIndex = (this.pageIndex()-1) * PAGE_SIZE;
   var endIndex = startIndex + PAGE_SIZE;
   return this.fullList().slice(startIndex, endIndex);
}, this);

次に、レコードを表示する「foreach」バインディングを完全なリストではなくpagedListにバインドし、前後のリンクでpageIndexの値を変更するだけです。そこから始めて、より堅牢にする/より多くの機能を提供できるはずです。

また、これは、とにかくすべてのデータをクライアントにプリロードすることを前提としています。前のリンクと次のリンクで JSON 呼び出しを行い、返された項目でモデルを更新することもできます。「次の」関数 (ビュー モデル プロトタイプに追加される) は、次のようになります。

ViewModel.prototype.next = function() {
   var self = this;
   this.pageIndex(this.pageIndex()+1);
   $.ajax("dataurl/page/" + this.pageIndex(), {
       success: function(data) {
          self.dataList(data);
       }
   });
}

(簡潔にするために ajax 呼び出しに jQuery 構文を使用しますが、どのメソッドでも問題ありません)

于 2013-04-19T08:24:06.940 に答える
0

私のブログ投稿では、その方法を非常に詳細に説明しています。あなたはそれを見つけることができます（ここ。http://contractnamespace.blogspot.com/2014/02/pagination-with-knockout-jquery.html）。実装は非常に簡単で、単純な JQuery プラグインで実行できます。

基本的に、AJAX で通常のノックアウト データ バインディングを使用し、サーバーからデータを取得した後、プラグインを呼び出します。ここでプラグインを見つけることができます。それはSimple Paginationと呼ばれます。

于 2014-02-20T08:27:35.223 に答える