KnockoutJS：40行のゼロからのAjaxグリッドビュー

最近、HabréではKnockoutJSへの参照がますます増えており、この傾向から離れることはありません。

今日は、かなりのコードを記述しながら、自分の手でページをフィルタリングしてナビゲートするAjaxグリッドビューの作成方法について説明します。

この記事を書き始めたとき、私は少し気まずく感じましたが、今ではその気持ちは消えていません。 問題は、ライブラリ自体が単純であり、MVVMパターンが単純であり、単純なことを説明することです。 近い将来、ノックアウトはかなり普及するだろうと確信しています。 そして、1年ほど後に、この記事に出くわす人が、提示された資料の単純さに失望することは恥ずかしいことです。 2007 jQueryの記事を開いた皆さんのように。



申し立てられたボタンのアコーディオンを恐れていない人、ハブラカトの下であなたにお願いをお願いします。







予想どおり、解決する必要のあるタスクを設定しましょう。

ユーザー（名前、性別、年齢）のリストを表示し、これらのパラメーターで検索できるようにする必要があるフロントエンド開発者を想像してください。 人のリストがページごとに表示されます。 しかし、このことは次のようになります。







バックエンド全体がすでに作成されており、すべてのインターフェイスが既知です。 それでここにあげます

ActionResult List(FilterParams filterParams, int pageNumber = 1);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ListResultオブジェクトは出力に返され、「検索結果」の配列とページを切り替えるためのデータ（現在のページ番号とページ数）で構成されます。

コードでは、すべて次のようになります。

 public class FilterParams { public int? AgeFrom { get; set; } public int? AgeTo { get; set; } public bool ShowMale { get; set; } public bool ShowFemale { get; set; } } public enum Gender { Male, Female } public class PagingData { public int PageNumber { get; set; } public int TotalPagesCount { get; set; } } public class Person { public string FirstName { get; set; } public string LastName { get; set; } public int Age { get; set; } public Gender Gender { get; set; } } public class ListResult { IEnumerable<Person> Data { get; set; } PagingData Paging { get; set; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、すでにタスクを解決することに集中できます。 マークアップから調査を開始することを提案します。 Knockoutにすでに精通している人にとって新しいことは何もありません。ここでは、初心者にとっては、すべてが明確であるべきです。

 <script type="text/html" id="TableRow"> <tr> <td data-bind="text: FirstName"></td> <td data-bind="text: LastName"></td> <td data-bind="text: Gender"></td> <td data-bind="text: Age"></td> </tr> </script> <table> <thead> <tr> <th> First name</th> <th> Last name</th> <th> Gender</th> <th> Age</th> </tr> </thead> <tbody data-bind="template: { name: 'TableRow', foreach: rows }"> </tbody> </table>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、1つのレコードのテンプレートがあります。 テーブルには静的ヘッダーがあり、tbodyはrows配列から取り込まれます。 次に、このテーブルにデータを入力できるビューモデルを記述する必要があります。 最初にコードを示し、次に説明します。

 var viewModel = { rows: ko.observableArray() }; ko.dependentObservable(function () { $.ajax({ url: '/AjaxGrid/List', type: 'POST', context: this, success: function (data) { this.rows(data.Data); } }); }, this); ko.applyBindings(viewModel);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ViewModelには1つのフィールド（行）のみが含まれます。 最初は空です。 次に、dependentObservableを作成します。これは初期化中に実行されます。 実行時に、サーバーにAJAXリクエストを行い、レスポンスのDataフィールドの値がrowsフィールドに割り当てられます。 KOは、行フィールドの変更を追跡し、到着したエントリをテーブルに追加します。 dependentObservableの作業の詳細については、 公式ドキュメントまたはこのコメントを参照してください 。



次のステップは、ページ切り替えを追加することです。 viewModelから始めましょう

 var viewModel = { rows: ko.observableArray(), paging: { PageNumber: ko.observable(1), TotalPagesCount: ko.observable(0), next: function () { var pn = this.PageNumber(); if (pn < this.TotalPagesCount()) { this.PageNumber(pn + 1); } }, back: function () { var pn = this.PageNumber(); if (pn > 1) { this.PageNumber(pn - 1); } } } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、MVVMパターンのViewModelの本質が非常にはっきりと見えます。 このモデルは、 PageNumberとTotalPagesCountの 2つのプロパティで構成されています 。 このモデルの表現には、すでにnext（）およびback（）メソッドがあります。 isFirstPageまたはisLastPageプロパティが必要な場合、それらはviewModelでも宣言されます。 したがって、王（モデル）は有用で変更可能な従者（ViewModel）に囲まれています。



ページ切り替えの表示は簡単です。

 <script type="text/html" id="PagingPanel"> Page <span data-bind="text: PageNumber" /> of <span data-bind="text: TotalPagesCount" />. <br /> <a href="#next" data-bind="click: back"><</a> <a href="#next" data-bind="click: next">></a> </script> <div data-bind="template: { name: 'PagingPanel', data: paging }"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、表示されているページ数のうち、どのページを表示し、ボタンを前後に表示するだけです。 ページを切り替えるときにデータを更新するようにグリッドビューを教えることは、ほとんど残っていません。



これを行うには、dependentObservableをわずかに変更する必要があります。

 ko.dependentObservable(function () { $.ajax({ url: '/AjaxGrid/List', type: 'POST', data: {pageNumber: this.paging.PageNumber()} context: this, success: function (data) { this.rows(data.Data); } }); }, this);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

PageNumberフィールドの値をAJAXリクエストに追加しました。 これでKnockoutは、PageNumber（）プロパティを変更した場合、dependentObservableを「再カウント」する必要があることを認識します。 したがって、ユーザーがさらにボタンを押すと、viewModelはこのイベントをキャッチし（data-bind = "click：next"）、PageNumberの値を1だけ増やします。 その後、KOはPageNumberの変更が発生したことを確認します。つまり、dependentObservableをオーバーライドする必要があります。 次に、AJAXリクエストを送信し、着信データがviewModel.rowsに配置されます。これにより、テーブルのコンテンツが完全に再描画されます。



次に、フィルタリングを追加します。 ページ切り替えに似たアプローチを使用します。 すべての検索パラメーターは観察可能であり、その値はリクエストが送信されるときに送信されます。 つまり フィルタリング条件が変更されると、リクエストがサーバーに送信されます。

 var viewModel = { filterParams: { ShowMale: ko.observable(true), ShowFemale: ko.observable(true), AgeFrom: ko.observable(), AgeTo: ko.observable() }, rows: ko.observableArray(), paging: { PageNumber: ko.observable(1), TotalPagesCount: ko.observable(0), next: function () { var pn = this.PageNumber(); if (pn < this.TotalPagesCount()) { this.PageNumber(pn + 1); } }, back: function () { var pn = this.PageNumber(); if (pn > 1) { this.PageNumber(pn - 1); } } } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際のフィルターパネルビュー：

 <script type="text/html" id="FiltrationPanel"> Age from <input type="text" size="3" data-bind="value: AgeFrom" /> to <input type="text" size="3" data-bind="value: AgeTo" /> <br /> <label><input type="checkbox" data-bind="checked: ShowMale" />Show male</label> <br /> <label><input type="checkbox" data-bind="checked: ShowFemale" />Show female</label> </script> <div data-bind="template: { name: 'FiltrationPanel', data: filterParams }"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてdependentObservableをわずかに相関させる必要があります。

 ko.dependentObservable(function () { var data = ko.utils.unwrapObservable(this.filterParams); // Dependent observable will react only on page number change. data.pageNumber = this.paging.PageNumber(); $.ajax({ url: url, type: 'POST', data: data, context: this, success: function (data) { this.rows(data.Data); this.paging.PageNumber(data.Paging.PageNumber); this.paging.TotalPagesCount(data.Paging.TotalPagesCount); } }); }, this); ko.dependentObservable(function () { var data = ko.toJS(this.filterParams); // Reset page number when any filtration parameters change this.paging.PageNumber(1); }, this);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで少し説明が必要です。 String var data = ko.toJS（this.filterParams）; filterParamsフィールドからJSオブジェクトを取得し、すべてのオブザーバブルの値が取得されます。 このように、フィルター条件が変更されると、KOはdependentObservableを再カウントします。 また、2番目のdependentObservableを追加しました。これは、フィルター条件が変更されたときに現在のページ番号を1にリセットします。 したがって、フィルターを変更するときは、最初のページをリクエストする必要があります。



実際、取り消し線の段落では、フィルター条件が変更されたときに2つのサーバーリクエストにつながるソリューションについて説明しました。 1つは変更自体が原因で、2つ目はpageNumberを1に設定することによるものです。 状況を修正するために、次の行を修正しました

 var data = ko.toJS(this.filterParams);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

に

 var data = ko.utils.unwrapObservable(this.filterParams);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、 unwrapObservableはtoJSメソッドと同じ結果を返しますが、 filterParamsが変更されるとdependentObservableが再カウントされます。



したがって、サーバーへの要求はページ番号の変更のみを開始し、ページの切り替えまたはフィルタリング条件の変更によって引き起こされる可能性があります。



また、サーバーから応答を受信すると、ページ数または現在のページの数が変更された場合にページングフィールドの値を更新します（たとえば、ページ10をリクエストし、5つしかありません）。



実際、私たちはすでに自分自身のタスクセットを解決しています。 しかし、私は彼女から少し要約を提案し、考えます。 非常に具体的な問題を解決しました。 しかし、ViewModelはタスク自体についてほとんど知りません。 彼女はURL、データの取得先、フィルタリングオプションについてのみ知っています。 それだけです これは、コードを再利用可能にできることを意味します。 viewModelを、url引数とfilteringParams引数を持つクラスに変換します。

 var AjaxGridViewModel = function(url, filterParams) { this.rows= ko.observableArray(); this.filterParams = filterParams; this.paging = { PageNumber: ko.observable(1), TotalPagesCount: ko.observable(0), next: function () { var pn = this.PageNumber(); if (pn < this.TotalPagesCount()) this.PageNumber(pn + 1); }, back: function () { var pn = this.PageNumber(); if (pn > 1) this.PageNumber(pn - 1); } }; ko.dependentObservable(function () { var data = ko.utils.unwrapObservable(this.filterParams); // Dependent observable will react only on page number change. data.pageNumber = this.paging.PageNumber(); $.ajax({ url: url, type: 'POST', data: data, context: this, success: function (data) { this.rows(data.Data); this.paging.PageNumber(data.Paging.PageNumber); this.paging.TotalPagesCount(data.Paging.TotalPagesCount); } }); }, this); ko.dependentObservable(function () { var data = ko.toJS(this.filterParams); // Reset page number when any filtration parameters change this.paging.PageNumber(1); }, this); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードはすべて正確に39行を占有します。 タイトルを思い出すと、初期化用のタイトルが残っています。

 ko.applyBindings(new AjaxGridViewModel('/Ajax/List', { ShowMale: ko.observable(true), ShowFemale: ko.observable(true), AgeFrom: ko.observable(), AgeTo: ko.observable() });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、2番目の引数は全体像を台無しにします。 オブジェクトを1行で記述する代わりに、その性質について考えてみましょう。 実際、これはC＃で説明されているFilterParamsオブジェクトのコピーアンドペーストです。 そのフィールドはViewでのみ使用され、ViewModelでは明らかにそれらを明示的に使用しません。 これにより、ViewModelからこのクラスを削ることができます。



この例では、ASP.NET MVCを使用しました。 そして、私はこの問題を非常に簡単に解決しました：

 C#: public ActionResult Index() { return View(new FilterParams()); } CSHTML: ko.applyBindings(new AjaxGridViewModel('@Url.Action("List")', @Html.ToJSON(Model)))
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

つまり、デフォルトのフィルタリング設定を持つクラスのインスタンスをビューに渡すだけで、ビューはそれを直列化してJSオブジェクトに変換します。 したがって、コードのメンテナンス作業を簡素化しました。 このオブジェクトが使用される未コンパイルの場所は、テンプレートFiltrationPanelだけです。



しかし、それだけではありません。 当初、 filtrationParamsフィールドには観測可能な値が含まれていました。 そして今、私たちは彼に単純なJSオブジェクトを与えました。 このオブジェクトのすべてのフィールドをko.observable（）でラップする必要があります。 このためのko.mappingプラグインがあります。



AjaxGridViewModelクラスの2行目でこのプラグインを使用します。

 var AjaxGridViewModel = function(url, filterParams) { this.rows= ko.observableArray(); this.filterParams = ko.mapping.fromJS(filterParams); ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

確かにそれだけです。



そして今、jqGridなどがあるのになぜそれが必要なのか。 一番下の行は、これらはすべて表を表示するために適応された重量コントロールです。 彼らには多くの機会がありますが、それらは非常に狭い範囲を対象としています。 そして、再利用可能なviewModelと絶対的に軽量なビューを作成しました。 テーブル、リストなど何でも使用できます。 この場合、表示されるデータはサーバーコードとhtmlのみが知っています。 そしてそれが柔軟性です。 ページのフィルタリングとリーフでデータを表示するための便利なツールが手に入りました。 コードは小さく、どのように機能するかを完全に理解しています。 すごいですね。



記事をマスターしたすべての人に感謝します。 これがおもしろくて便利だったことを願っています。 このリンクからASP.NET MVC 3のサンプルの最終バージョンのソースコードをダウンロードできます。



ご清聴ありがとうございました。 私は質問と建設的な批判に喜んでいるでしょう。



更新 ：フィルター条件を変更するときの2つのサーバー要求に関する問題を修正しました。