前の記事では、追加、削除、修正、検索関数[1]を実装するために、Bootstraptableとknockoutjsの組み合わせ[1]を紹介し、knockout.jsのいくつかの基本的な使用法を導入しました。次に、この記事を通じて引き続き紹介します。 KOを使用してプロジェクトを行う予定がある場合は、見てみましょう！
Bootstrapはフロントエンドのフレームワークであり、Web開発者を解放するのに適したものです。 UIが非常にハイエンド、雰囲気があり、ハイエンドであることを示しています。理論的には、CSSのラインを書く必要はありません。適切な属性をタグに追加するだけです。
Knockoutjsは、JavaScriptが実装されたMVVMフレームワークです。とても良い。たとえば、リストデータ項目を追加または削減した後、コントロールフラグメント全体を更新したり、JSの追加と削除ノードを自分で書き留める必要はありません。構文定義を満たすテンプレートと属性を定義するだけです。簡単に言えば、データへのアクセスに注意を払う必要があります。
1。効果のプレビュー
実際、それは効果がありません。これは、単純な追加、削除、変更、および検索です。キーはまだコード上にあります。 KOを使用すると、多くのインターフェイスDOMデータバインディング操作を保存できます。以下は、追加、削除、変更、および検索のロジック全体のJSコードです。
ページ効果：
2。コードの例
わかりました、ポイントに到達しましょう！ブロガーは、2つの部分で紹介する予定です。最初の部分はテーブルの初期化部分で、2番目の部分はボタン操作、削除、および変更部分です。
1。テーブル初期化
1.1。準備
まず、参照する必要があるJSおよびCSSファイルを見てください
<link href = "〜/content/bootstrap/css/bootstrap.min.css" rel = "styleSheet"/> <link href = "〜/content/bootstrap-table/bootstrap-table.min.css" rel = "styleSheet"/>> <script src = " src = "〜/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "〜/content/bootstrap-table/bootstrap-table.min.js"> </script> <scrip src = "〜/content/boottrap-table/locale/locale src = "〜/scripts/nockout/knockout-3.4.0.min.js"> </script> <script src = "〜/scripts/nockout/extensions/knockout.mapping-latest.js"> </scrip src = "〜/scripts/departion.js"> </script>
それらはすべて一般的に使用されているCSSおよびJSファイルです。主に2つのカスタムJSファイルがあります：knockout.bootstraptable.jsとdepartment.js。前の記事では、KOを使用するとデータバインドをカスタマイズできることを紹介しました。同様に、テーブルのバインディングについては、knockout.bootstraptable.js内のカスタムバインディング、コードも定義します。
// KOカスタムバインディングko.bindinghandlers.mybootstraptable = {init：function（element、valueaccessor、allbindingsacsesser、viewmodel）{//オパラムはここにあります。 viewmodel oviewmodel.bootstraptable = function（）{return $ ele.bootstraptable.apply（$ ele、arguments）;}}}}}}}を表示する方法ko.bootstraptableviewmodel = function（option）{this = this.default = {true、//この検索はクライアント検索であるかどうか、したがって、個人的にはsigned search：true、showcolumns：true：true最小限のコラム：2、// clickToselectを許可する最小数：true、// [row showtoggleを選択]を有効にする場所。 arrres;}; // this.refresh = function（）{that.bootstraptable（ "reffress"）;};};}）（jquery）;コード疑問：このJSファイルは主に2つのことを行います
1.データバインドプロパティMyBootStraptableをカスタマイズします。 ko.bindinghandlers.mybootstraptableの更新方法の場合、それを定義する必要はありません。
2。bootstraptableviewmodelをKOオブジェクトに追加することにより、ブートストラップ可能なものをカプセル化します。
1.2。 HTMLタグのバインディングを開始します
<表ID = "TB_DEPT" data-bind = "mybootStraptable：$ root"> <tr> <th data-checkbox = "true"> </th> <th data-field = "name name">部門名</th data-field = "level">部門レベル</th> <thデータフィールド= "des"時間</th> </tr> </tead> </table>
コード疑問：テーブルタグを定義し、MyBootStraptableにカスタムバインディングを使用します。前の記事で述べたように、$ rootは初期化の意味として理解できます。簡単にするために、すべての列は<th>に直接記述されます。
1.3。 KOの結合を活性化します
ページが読み込まれたら、KOのバインディングを開始します。
// $（function（）{// 1、init table tableinit.init（）; // 2、登録アドオン、削除、および変更イベントoperating.opereinit（）;}）; // table var tableinit = {init（）{//バインディングテーブルビューモデル'/department/getDepartment'、// request url（*）メソッド： 'get'、// request method（*）toolbar： '#toolbar'、//ツールボタンqueryparamsに使用されるコンテナ：function（param）{rimit：limit：param.limit、offset：param.Offset};}サイドページネーション：「サーバー」、//ページネーション方法：クライアントクライアントページネーション、サーバーサーバーページネーション（*）パージナンバー：1、//最初のページをロードする最初のページページサイズ：10、//ページごとのレコードライン数（*）ページリスト：[10、25、50、100]、// document.getElementById（ "tb_dept"））;}};コードの疑い：ページが読み込まれたら、上記のブートストラップ可能なviewmodelオブジェクトを呼び出して、渡されたパラメーターをマージし、最後にバインディングをアクティブにし、これをバインドされたviewmodelとしてアクティブにします。デバッグコードは、ko.applybindings（this.myviewmodel、document.getelementbyid（ "tb_dept"））のときを示しています。実行されます。カスタムバインディングが有効になり、プログラムはko.bindinghandlers.mybootstraptableオブジェクトのinitメソッドを入力して、ブートストラップ可能なものを初期化します。説明するべきポイントは次のとおりです。
init：init：function（element、valueaccessor、allbindingsacsess、viewmodel）{// oparamは、バウンドViewmodelvar oviewmodel = var $ ele = $（element）.bootstraptable（oviewmodel.params）; $ ELE.BOOTSTRAPTABLE.APPLY（$ ELE、引数）;}}上記のinitメソッドでは、2番目のパラメーターValuecaccessを介して、現在バインドされたViewModelを取得します。ブロガーは、これがカスタムバインディングの論理を理解するのに役立つと考えています。基本的に、この文を実行すると、var $ ele = $（element）.bootstraptable（oviewmodel.params）;、テーブルの初期化が完了します。ブロガーは、バックグラウンドで対応するメソッドのコレクションを定義しています。完全性のために、私はそれをここに投稿します：
DepartmentController
2。ボタン操作
上記は、Bootstraptableの初期化を通じてカスタムデータバインドを使用することです。以下のボタン操作を使用して、監視属性を使用して「Shuangweiwai」を体験しましょう。
2.1。ページを表示します
まず、[表示]ページで[追加]ボタンを定義します
<div id = "toolbar"> <button id = "btn_add" type = "button"> <span aria-hidden = "true"> </span> </button> <button id = "btn_edit" type = "button"> <span aria-hidden = "true"> </span> modify </button = "btn_delete"> <ボタンaria-hidden = "true"> </span> delete </button> </div>
簡単にするために、ブロガーは隠されたポップアップボックスを使用して、新しく追加および編集されたテキストボックスを含んでいます。もちろん、一般的に言えば、ここで部分的なビューを使用する場合があり、プロジェクトにedit.cshtmlがあるかもしれませんが、ここでは、これがテキストの焦点ではないため、これらを1つのページに掲載しています。
<div id = "mymodal" tabindex = "-1" role = "dialog" aria-labelledby = "mymodallabel"> <div role = "document"> <div> <div> <button = "button" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true"> x </span> </button> < id = "mymodallabel">操作</h4> </div> <div> <label for = "txt_departmentname">部門名</label> <入力タイプ= "text" name = "txt_departmentname" data-bind = "value：name" id = "txt_departmentname" placeholder = "department"> div> <> <> < for = "txt_departmentlevel">部門レベル</label> <入力タイプ= "テキスト" name = "txt_departmentlevel" data-bind = "value：" level "id =" txt_departmentlevel "placeholder =" departmentlevel "> </div> <div> <label for =" txt_des " data-bind = "value：des" id = "txt_des" placeholder = "description"> </div> </div> <div> <button type = "button" data-dismiss = "span aria-hidden =" true "> </span> close </button> <button type =" button id "=" btn_submit ""> <spas aria-hidden = "true"> </span> save </button> </div> </div> </div>
2.2。 JS初期化ボタン操作
//操作var操作= {//ボタンイベントoperateInit：function（）{this.operateadd（）; this.operateupdate（）; this.operatedelete（）; this.departmentModel = {id：ko.observable（）、name：name：ko.observable（）、rever：dectimable（）、dectimable（）、ko.observable（）、ko.observable ko.observable（）};}、// OperationAdd：function（）{$（ '＃btn_add'）。 ko.observable（）、level：ko.observable（）、des：ko.observable（）、createtime：ko.observable（）}; ko.utils.extend（operate.departmentmodel、oemptymodel）; ko.applybindings（operate.departmentmodel、 document.getElementById（ "myModal"））; operate.operatesave（）;}）。 {$（ '＃BTN_EDIT'） viewmodelko.utils.extend（operate.departmentModel、ko.mapping.fromjs（arrrrecteddata [0]））; ko.apprymentmodel、document.getElementbyid（ "mymodal"））; operate.operateageave（ 'operateageage（' operateage（mymodal "）; in（mymodal '）; （）{//ポップアップボックスを閉じるときにバインディングをクリアします（このクリアにはバインディングをクリアして登録イベントのクリアを含む） ArrrectedData = tableInit.myviewmodel.getSelections（）; $。Ajax（{url： "/department/delete"、type： "post"、contentType： 'application/json'、data：json.stringify（arrrectedData）、成功：成功：機能（データ、ステータス） {alert（status）; // tableinit.myviewmodel.refresh（）;}}）;}データモデルからデータモデルodatamodel = ko.tojs（oviewmodel）; var funcname = odatamodel.id?"update": "add"hurl"："; $.ajax（{/department/"+funcname、type：" post "、data：odatamodel、success（data、data、data、data、data、data、data） {alert（status）; tableinit.myviewmodel.refresh（）;}}）;}）;}、}、}、// data verfication operatecheck：function（arr）{if（arr.length <= 0）{alert（ "データの少なくとも1つの行を選択してください"）; returt false; false;} return true;}}コードの懐疑論：こちらの実行ロジックについて教えてください。最初に、operator.operateInit（）を呼び出します。 $（function（）{}）メソッド。 OperatorInit（）メソッドで、ページ上のボタンのクリックイベントを登録し、これを新しく編集したViewModelとして定義します。このViewModelは、ページ要素に対応する監視属性を定義します。上に隠されたポップアップボックスのデータバインドをまだ覚えていますか？はい、それの対応する値値は、ここの監視属性に対応しています。バインディングを設定した後、this.departmentModelにつながるJSのすべての監視変更は、インターフェイス上のバインディングタグの値を変更します。それどころか、インターフェイス上のすべてのタグの値値の変更は、必然的にその監視属性値の変更を引き起こします。これはいわゆる双方向結合です。双方向結合の実行を詳細に見てみましょう。
2.3。新しい操作
$（ '＃btn_add'）。 ko.observable（）}; ko.utils.extend（operate.departmentmodel、oemptymodel）; ko.applybindings（operate.departmentmodel、document.getElementbyid（ "mymodal"））; operate.operateave（）;}） {ko.cleannode（document.getElementById（ "myModal"））;}）;}）;インターフェイスが新しい操作をトリガーすると、上記の隠されたモーダルボックスが最初にポップアップします。モーダルボックスが表示されたら、最初に空のviewmodelを定義し、次にko.utils.extend（operate.departmentModel、oEmptyModel）を呼び出します。この文は、空のviewmodelでグローバルoperating.departmentModelを上書きします。 ko.utils.extend（）メソッドの関数は、jqueryの$ .extend（）の関数に似ています。以前の両方のオブジェクトは、後続のオブジェクトに基づいてマージされ、マージ後、新しいViewModelを使用してバインディングがアクティブになります。バインディングをアクティブにした後、[保存]ボタンのクリックイベントを登録します。これを追加すると、モーダルボックスがポップアップします。 ViewModelの監視属性はすべて空であるため、対応するインターフェイス要素の値もクリアされるため、新しい追加でこれを確認します。
ポップアップボックスが閉じられたら、ko.cleannode（document.getElementByID（ "mymodal"））を実行します。閉じたイベントを通じて。この文は非常に重要です。なぜなら、同じDOMについては、KOは一度しか縛らないからです。もう一度バインドする必要がある場合は、最初にバインディングをクリアする必要があります。さらに、CleanNode（）メソッドは、バインディングをクリアするだけでなく、DOMに登録されているイベントをクリアします。使用するときは注意が必要です！
2.4。操作の編集
$（ '＃btn_edit'） viewmodelko.utils.extend（operate.departmentmodel、ko.mapping.fromjs（arrrecteddata [0]））; ko.appartmentmodel（operate.departmentModel、document.getElementbyid（ "mymodal"））; oper.operateageadeageageave（ 'operateageageave（mymodal "）; operate.operateageave（'）; operateageave（aperateage（mymodal”）; （）{//ポップアップボックスを閉じるときにバインディングをクリアします（これには、登録イベントのバインディングをクリアしてクリアすることが含まれます）ko.cleannode（document.getElementById（ "mymodal"））;}）;}）;;;編集操作をトリガーすると、インターフェイスが表示されます。ポップアップボックスのポップアップイベントで、現在選択されている行を取り、行が選択されているかどうかを確認します。文ko.mapping.fromjs（arrrectedData [0]）を介して、監視属性を使用して、通常のJSONオブジェクトをViewModelに変換するのが最善です。前の記事で述べたように、この方法ではJSファイルknockout.mapping-latest.jsのサポートが必要です。変換後、ViewModelはko.utils.extend（）メソッドを介して更新され、バインディングをアクティブにします。 ViewModelは現在選択されている行のデータによって更新されるため、結果は次のとおりです。
2.5。操作を保存します
ポップアップボックスを追加および編集した後、関連情報を変更した後、[保存]をクリックすると、保存イベントがトリガーされます。
$（ '＃btn_submit'）。on（ "click"、function（）{// odatamodel.id?"update ": "add"; $.ajax（{url："/department/"+funcname、type：" post "、data：odatamodel、success：function（data、status）{alert（status）; tableinit.myviewmodel.refresh（）;}）;}）;保存イベントがトリガーされると、最初にViewModelをページ、つまりoperating.departmentModelにバインドし、ko.tojs（）メソッドを使用して、ViewModelを監視する属性を使用して純粋なデータを持つJSONオブジェクトに変換します。この方法はKOに組み込まれており、他のJSサポートは必要ありません。 JSONオブジェクトを取得した後、AJAXリクエストを送信してデータを追加または編集します。これは、双方向の結合をよく反映しています。インターフェイス上のすべてのテキストボックスの値が変更された後、operating.departmentModelの変更もトリガーされます。
2.6。操作を削除します
削除操作については何も言うことはなく、KOとは何の関係もありません。
3。概要
上記は、簡単な追加、削除、変更、および検索操作を通じて、KOとBootstraptableの共同使用を導入します。 KOはあなたをDOMから解放し、ViewModelに集中できます。 JSコード全体を見ると、jQueryのval（）、text（）、およびその他の操作を表示して、インターフェイスDOMに値を取得および割り当てることはほとんどできません。きれいでさわやかで、ハイエンドに見えますか？もちろん、これはKOのより基本的な使用法の一部かもしれません。結局のところ、ブロガーはKOしか学習していないため、より高度な使用法を調査する必要があります。しばらくして慣れると、その高度な使用法の一部をすべての人と共有します。この記事がKOの原則とその使用法を理解するのに役立つと思われる場合は、それを推奨することもできます。編集者はここで感謝しています！
上記は、追加、削除、変更、および検索機能を実装するためのブートストラップ可能なBootstraptableとknockoutjsの組み合わせの全体的な内容です[2]。私はそれが誰にでも役立つことを願っています！