BootstrapTable と KnockoutJS を組み合わせて追加、削除、変更、クエリ機能を実装する [1]_javascript スキル

bootstrap は、web 開発者にとって優れたものを解放するフロントエンド フレームワークです。bootstrap が提供する ui は非常にハイエンドで上品です。理論的には、css を 1 行記述する必要はありません。適切な属性をタグに追加するだけです。

knockoutjs は、javascript で実装された mvvm フレームワークです。とてもかっこいい。たとえば、リスト データ項目を追加または削除した後、コントロール フラグメント全体を更新したり、ノードを追加または削除するための js を自分で記述したりする必要はなく、その構文に準拠したテンプレートと属性を事前に定義するだけで済みます。意味。簡単に言うと、データ アクセスだけに注目する必要があります。

1. knockout.js の概要

1. knockout.js と mvvm

今では、さまざまなフロントエンド フレームワークが圧倒的で、眩しいばかりです。プログラマーであることは本当に難しいと嘆く必要はありません。学ばなければならないテクニックは常に無限にあります。変身しない限り、いつ終わることになるでしょうか。苦しみの海は無限です、引き返すか岸辺に行くか決めるのはあなた次第です！

knockout.js は、mvvm パターンに基づいた軽量のフロントエンド フレームワークです。どの程度軽量ですか?公式ウェブサイトに表示されている最新バージョン v3.4.0 によると、わずか 22kb です。データ モデルとインターフェイス dom のバインディングをフレンドリーな方法で処理できます。最も重要なことは、バインディングが双方向であることです。つまり、データ モデルが変更されると、インターフェイス dom 上のデータもそれに応じて変更されます。同様に、インターフェイス dom もそれに応じて変更され、データベース上のデータが変更されると、データ モデルもこの変更に応答します。これにより、フロントエンド コードの量が大幅に削減され、インターフェイスの保守が容易になり、大量のイベント監視データ モデルを作成したり、インターフェイス dom を変更したりする必要がなくなりました。以下のブロガーが使用例に基づいてこれら 2 つのポイントを説明します。

knockout.js 公式 web サイト: http://knockoutjs.com

knockout.js オープンソース アドレス: https://github.com/knockout/knockout

mvvm パターン: これは、ユーザー インターフェイスを作成するための設計パターンです。mvvm は、モデル、ビュー、ビューモデルの 3 つの部分に分割します。モデルはデータ モデル、ビューはビュー、ビューモデルはビュー モデルです。 . ビュー上のデータ モデルと dom 要素をバインドするために使用されます。 wpf と silverlight を使用したことがある場合は、これを理解するのは問題ありませんが、使用したことがない場合でも問題はありません。この記事を読むと、一般的な理解が得られます。

2. 最も単純な例

一般的にはつまり、knockout.js を最初から使い始める場合は、少なくとも次の 4 つの手順を実行する必要があります

2.1。公式 web サイトにアクセスして、 knockout.js ファイルを作成し、それを引用して表示ページに移動します。

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>

注:knockout.js は jquery のサポートを必要としません。プロジェクトで jquery 関連の操作を使用する必要がある場合は、jquery を引用してください。 ; それ以外の場合は、上記のファイルを参照するだけです。

2.2. viewmodel の定義

viewmodel とは何ですか?実際、js では、これは json オブジェクトのように見えます。ビューモデルを定義します。

var myviewmodel = {
name: "lilei",
profession: "软件工程师",
};

2.3、ビュー ビューでラベル バインディング データバインドを定義します

<div> 
姓名：<label data-bind="text:name"></label><br />
职业：<input type="text" data-bind="textinput:profession" />
</div>

注: input タグに対応するテキストは textinput を使用する必要がありますが、通常のタグのテキストはテキストにすることができます。

2.4. バインディングを有効にする

上記の 3 つの手順を完了したら、ノックアウト バインディングも有効にする必要があります。

/ >

ko.applybindings(myviewmodel);

これら 4 つの手順を実行することで、基本的に最も単純なビューモデル データ バインディングが実現されます。

十分に注意していれば、ko.applybindings() メソッドには 2 つのパラメータがあることがわかります。1 つ目はバインドする必要があるビューモデルです。2 つ目は何でしょうか? ko.applybindings(myviewmodel); から、2 番目のパラメータがオプションのパラメータであり、ビューモデルにバインドされたラベルのスコープを表すことがわかります。たとえば、上記のコードを変更してみましょう:

<div> 
姓名：<label id="lb_name" data-bind="text:name"></label><br />
职业：<input type="text" data-bind="textinput:profession" />
</div> 
ko.applybindings(myviewmodel,document.getelementbyid("lb_name"));

2 番目のパラメータが myviewmodel のスコープを制限していることがわかります。つまり、id= のラベルにバインドされている場合にのみ有効になります。 lb_name"。2 番目のパラメータは div などのコンテナ タグで、バインディングのスコープが div の下のすべてのサブタグであることを示します。

3. 属性の監視

上記4ステップまで、何も効果は見られず、json オブジェクトのデータを html タグにバインドしていることだけが表示されます。これを行う意味は何でしょうか?単純な問題を複雑にしていませんか？心配しないで、今すぐ奇跡を目撃してください！上で述べたように、ノックアウトの最も重要な意味は双方向バインディングです。では、どうすれば双方向バインディングを実現できるでしょうか?答えは、プロパティを監視することです。

ノックアウトには、observables、dependentobservables、observablearray という 3 つの主要な監視属性があります。observe の意味は観測と訳されます。これを観測属性または観測と呼ぶのは適切ではありません。非常に適切なので、ここでは監視属性と呼びましょう。

3.1. observables: プロパティのモニタリング

上記の例を次のように変更します。
p >

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>


<div> 
姓名：<label data-bind="text:name"></label><br />
职业：<input type="text" data-bind="textinput:profession" />
</div>




//1.定义viewmodel
var myviewmodel = {
name: ko.observable("lilei"),
profession: "软件工程师",
};
//2.激活绑定
ko.applybindings(myviewmodel);
$(function () {
//注册文本框的textchange事件
$("#txt_testobservable").on("input", function () {
myviewmodel.name($(this).val());
});
});

ko.observable("lilei") この文の意味は、ビューモデルの name 属性を監視属性として追加することです。name 属性が監視属性になると、何か魔法のようなことが起こります。 myviewmodel を書き込みます。次の場合:

名前が元の属性からメソッドに変更されます。つまり、ko.observable() が追加されると、対応する属性は次のようになります。メソッドの場合は、myviewmodel.name()を使用してnameの値の取得と代入を処理する必要があります。

コードの説明: 明らかに myviewmodel.name($(this).val()); この文は、現在のテキスト ボックスの値を name 属性に割り当てます。インターフェイスは name 属性にバインドされているため、ラベルの値もそれに応じて変更されます。または、これは textchange イベントを使用して行うこともできます。現在のテキスト ボックスの値がラベル label に割り当てられている限り、この効果も達成できます。これは何もありません。確かに、あなたの書き方で目的は達成できますが、監視属性の重要性は、name の値がどこかで変更されると、それに応じてインターフェイスも変更されるということです。ラベル タグに値をあらゆる場所に割り当てる代わりに、js は次のことだけを行う必要があります。 myviewmodel.name() メソッドをクリックするだけです。素晴らしいですね~~

3.2. dependentobservables: 依存関係属性のモニタリング

上記のモニタリング属性を読んでも面白くない場合は、 ?監視依存関係属性の使用法を見てみましょう。

コードを変更して見てみましょう:

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>


 
姓名：
职业：
描述：


//1.定义viewmodel
var myviewmodel = {
name: ko.observable("lilei"),
profession: ko.observable("软件工程师"),
};
myviewmodel.des = ko.dependentobservable(function () {
return "本人姓名——" + myviewmodel.name() + "，职业——" + myviewmodel.profession();
});
//2.激活绑定
ko.applybindings(myviewmodel);

コードの説明: モニタリングを追加することによって依存属性 ko.dependentobservable() は、名前と職業の両方の変更に対する des 属性の値を同時に監視できます。いずれか 1 つが変更された場合、des にバインドされたラベルが変更をトリガーします。これの最大の利点は、これにより、js を移動する必要がなくなりました。dom を操作する手間は少し興味深いです。

3.3. observablearray; 配列の監視

上記の 2 つに加えて、ko は配列オブジェクトの監視もサポートしています。例を見てみましょう:

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>








var deptarr = ko.observablearray([
{ id: 1, name: '研发部' },
{ id: 2, name: '行政部' },
{ id: 3, name: '人事部' }
]);
var viewmodel = {
deptarr: deptarr,
};
ko.applybindings(viewmodel);
var i=4;
$(function () {
$("#btn_test").on("click", function () {
deptarr.push({ id: i++, name: $("#txt_testobservable").val() });
});
});

コードの説明: 上記は ko によるものです。 observablearray() このメソッドは、配列オブジェクトの監視を追加します。つまり、js 内の任意の場所で deptarr 配列オブジェクトに配列の変更が行われる限り、ui がトリガーされて対応する応答が返されます。注意すべき点は、監視対象の配列は実際には監視対象の配列オブジェクトそのものであり、配列オブジェクト内のサブオブジェクトのプロパティの変更は監視できないということです。たとえば、クリック イベントを次のように変更します。

$(function () {
$("#btn_test").on("click", function () {
deptarr[1].name = "aaa";
});
});

これは、配列監視が実際には配列オブジェクト自体を監視し、配列内の要素の属性の変更を監視しないことを示しています。データ内のオブジェクトの属性変更を本当に監視する必要がある場合は、データ内のオブジェクト属性に対して ko.observable() を使用し、この 2 つを一緒に使用する必要があります。興味のある方は試してみてはいかがでしょうか。

4. ko の一般的なデータバインド属性

上記、複数のデータバインド属性を使用したため、ノックアウトにはそのようなデータバインド属性がいくつ存在するか。ここでは、一般的に使用されるプロパティをいくつかリストします。

4.1、テキストと inputtext

テキストは、名前が示すようにテキストを意味します。このバインディング属性は通常使用されます。 、、

およびその他のタグの場合、テキストが表示されます。もちろん、必要に応じて、どのタグでもこのバインディングを使用できます。基本的に何も言うことはありません。 ko.observable() が使用されない場合は静的バインディング、それ以外の場合は動的バインディングになります。

inputtext (input タグのテキスト) は、input タグの value 属性と同等です。

　　<div> 
姓名：<label data-bind="text:name"></label><br />
职业：<input type="text" data-bind="textinput:profession" />
</div> 
　　　　 //1.定义viewmodel
var myviewmodel = {
name: ko.observable("lilei"),
profession: "软件工程师",
};
//2.激活绑定
ko.applybindings(myviewmodel);

4.2、値

このバインディング属性は通常、input タグに使用され、基本的に上記の inputtext と似ています。ただ価値観がより標準化されているだけです。

value とともに使用されるパラメータ valueupdate もあります。これは、インターフェイスが操作を実行するときに値が更新されることを示します。 valueupdate の主な値には、change/keyup/keypress/afterkeydown などが含まれます。それぞれ、テキストの変更、キーボードの縮小、キーボードの押下、キーボードの押下、および値に対応するビューモデルの値を更新するその他の操作を表します。

姓名：
<input type="text" data-bind="value:name,valueupdate:'keyup'" /><br /> 
　　　　var myviewmodel = {
name: ko.observable("lilei"),
};//2.激活绑定
ko.applybindings(myviewmodel);

上記のコードは、キーボードが格納されたときにテキスト ボックスの value 属性と myviewmodel の name 属性が更新されることを示しています。

4.3. チェック済み

チェック済みバインディングは、通常、チェックボックス、ラジオ、その他の選択可能なフォーム要素に使用されます。値が bool 型であることに対応します。使い方は基本的にvalueと同様なので説明は省略します。

4.4.enable

enable binding は通常、label 要素を有効にするために使用され、通常は form 要素を有効にするために使用されます。 . そして無効化されています。無効とは対照的に、対応する値も bool 型になります。

<div>
<input type="text" data-bind="enable:ismen"/>
</div>
<script type="text/javascript">
//1.定义viewmodel
var myviewmodel = {
name: ko.observable("lilei"),
profession: ko.observable("软件工程师"),
age: ko.observable(40),
ismen:ko.observable(true)
};
//2.激活绑定
ko.applybindings(myviewmodel);
myviewmodel.ismen(false);
</script>

ismen プロパティが false になるため、対応するすべてのテキスト ボックスが無効に表示されます。

4.5. 無効

は有効の反対であり、使用法は有効と似ています。

4.6、オプション

上記では、select タグを表す select バインディングを使用するときにオプションが使用されました。オプションのコレクション。対応する値は配列であり、このドロップダウン ボックスのデータ ソースを示します。このデータ ソースの監視は、observablearray を使用して有効にすることができます。使用方法については上記を参照してください。

4.7、html

テキスト バインディングは、実際には innertext タグの設定と値であるため、同じことが当てはまります。 , htmlバインディングもinnerhtmlの設定と値です。対応する値は html タグです。

4.8、css

css バインディングは、優れた dom 要素に 1 つ以上のスタイル (クラス) を追加または削除します。 。次の形式を使用します。

<style type="text/css">
.testbold {
background-color:powderblue;
}
</style> 
<div data-bind="css:{testbold:myviewmodel.name()=='lilei'}">aaaa</div> 
var myviewmodel = {
name: ko.observable("lilei"),
profession: ko.observable("软件工程师"),
age:ko.observable(40)
};

div には背景色が表示されます。

複数のスタイルを追加または削除する必要がある場合は、次のようなわずかな変更を加えるだけです。

<div data-bind="css:{testbold:myviewmodel.name()=='lilei',testborder:myviewmodel.profession()=='php工程师'}">aaaa</div>

4.9、スタイル

css バインディングの機能がクラス スタイルをタグに動的に追加または削除することである場合、スタイル バインディングの機能はタグに対して行われます。スタイルを動的に追加または削除します。例:

<div data-bind="css:{background-color:myviewmodel.name()=='lilei'?'red':'white'}">aaaa</div>

複数の要素を追加または削除する場合は、同じ css バインド メソッドを使用します。

4.10、attr

attr バインディングは主に、タグ、yonghe、css に 1 つ以上の属性 (カスタム属性を含む) を追加および削除するために使用されます。

4.11. クリック

クリック バインディングとは、対応する dom 要素にクリック イベントの実行メソッドを追加することを意味します。あらゆる要素に使用できます。

<div>
<input type="button" value="测试click绑定" data-bind="click:clickfunc" />
</div> 
　　　　var myviewmodel = {
clickfunc:function(){
alert($(event.currenttarget).val());
}
};
ko.applybindings(myviewmodel);

event.currenttarget は、現在クリックされている dom 要素を表します。簡単にするために、次のような匿名関数を直接使用してバインドすることがあります。

<div>
<input type="button" value="测试click绑定" data-bind="click:function(){
alert('点击了');
}" />
</div>

しかし、html に js を記述するこの方法はブロガーには受け入れられにくく、特にクリック イベントのロジックが少し複雑な場合には、メンテナンスが比較的不便であると感じています。したがって、必要な場合を除き、この匿名関数を直接記述することはお勧めできません。

4.12、その他

data-bind のすべてのバインディングについては、公式 web サイトの紹介を参照してください。こちら 一つ一つ記載しておりません。利用する場合は公式サイトで確認してください。公式 web サイトにリストされているすべてのバインディングを見てください。

5. json の変換と変換オブジェクトとモニタリング属性の関係

異なる言語での直接的な表現を避けるために、フロントエンドとバックエンドと対話する際には通常 json 形式のデータを使用することがわかっています。 http リクエストによるバックエンド。ko の機能の一部を使用するには、これらの通常のデータ モデルを ko のモニタリング属性に変換する必要があります。次に、ko のモニタリング属性を使用する場合、これらの属性を通常の json データに変換する必要がある場合があります。はバックグラウンドに転送されますが、この変換を実現するにはどうすればよいでしょうか?

5.1. json オブジェクトを viewmodel に変換する

たとえば、バックグラウンドから json オブジェクトを取得し、変更します。それをビューモデルに取り込んでから、インターフェイス dom にバインドします。

$.ajax({
url: "/home/getdata",
type: "get",
data: {},
success: function (data, status) {
var ojson = data;
}
});

バックエンドにリクエストを送信し、json オブジェクトを取得して ojson に割り当て、次に ojson をビューモデルに変換します。最も直感的な方法は、手動で変換することです。たとえば、次のようにすることができます。

　　　　var myviewmodeljson = {
deptname: ko.observable(),
deptlevel: ko.observable(),
deptdesc:ko.observable()
};
ko.applybindings(myviewmodeljson);

次に、ajax リクエストが成功すると

success: function (data, status) {
var ojson = data;
myviewmodeljson.deptname(ojson.deptname);
myviewmodeljson.deptlevel(ojson.detplevel);
myviewmodeljson.deptdesc(ojson.deptdesc);
}

このように、手動バインディングを通じて、json オブジェクトのビューモデルへのバインディングが実現されます。この利点は柔軟性ですが、欠点は手動コードの量が多すぎることです。

幸いなことに、全能のオープン ソースを使用すると、誰かが常により良い方法を考え出します。knockout.mapping コンポーネントを使用すると、インターフェイス json オブジェクトをビューモデルに変換できます。

knockout.mapping オープン ソース アドレス: ダウンロード

使い方を簡単に見てみましょう。これはまだ上記の例です。ビューモデル定義を実装する必要はありません。まず、knockout.mapping.js を参照する必要があります。

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>

注: ここでは、knockout.mapping-lastest を参照します。 .js は、knockout-3.4.0.min.js に配置する必要があります。そうしないと、ko.mapping を呼び出すことができません。

次に、成功関数で直接使用します。

　　　　　　　　　success: function (data, status) {
var myviewmodeljson2 = ko.mapping.fromjs(data);
ko.applybindings(myviewmodeljson2);
}

コードの説明: json からのリクエストバックグラウンドで取得したオブジェクトはko.mapping.fromjs()で簡単にビューモデルに変換できます。もちろん、この使用法に加えて、以下を使用して既存のビューモデルを更新することもできます。

　　　　var myviewmodeljson = {
deptname: ko.observable(),
deptlevel: ko.observable(),
deptdesc:ko.observable()
};
ko.applybindings(myviewmodeljson);
$(function () {
$.ajax({
url: "/home/getdata",
type: "get",
data: {},
success: function (data, status) {
ko.mapping.fromjs(data, myviewmodeljson)
}
});
});

成功したら、データの値に従って myviewmodeljson ビューモデルを更新します。

5.2. viewmodel を json オブジェクトに変換する

上記では、json オブジェクトが viewmodel に変換されると述べましたが、その逆は、ビューモデルを json オブジェクトに変換してバックエンドに渡す必要がある場合、どうすればよいでしょうか?

ノックアウトには 2 つのメソッドが用意されています。

•ko.tojs( ): convertビューモデルを json オブジェクトに変換
•ko.tojson(): ビューモデルをシリアル化された json 文字列に変換します。

たとえば、コードは次のとおりです。

$(function () {
var ojson1 = ko.tojs(myviewmodeljson);
var ojson2 = ko.tojson(myviewmodeljson);
});
var myviewmodeljson = {
deptname: ko.observable("研发部"),
deptlevel: ko.observable("2"),
deptdesc: ko.observable("开发一伙人")
};
ko.applybindings(myviewmodeljson);

次に、ojson1 と の値を監視してみましょう。 ojson2

コードの説明: ここで説明する必要があるのは、これら 2 つのメソッドは ko に付属しており、マッピング コンポーネントのサポートを必要としないということです。

6. 独自のデータバインド属性を作成します

上記ここまで述べたものの、これらはいずれもノックアウトに何らかのバインディングとモニタリングを導入するため、場合によっては次のようにデータバインドをカスタマイズする必要があります: 、この種の要件コンポーネントをカプセル化する場合に特に便利です。実現できますか?もちろん。

ノックアウトでは、データバインド属性をカスタマイズするために ko.bindinghandlers 属性が提供されます。その構文は次のとおりです。

ko.bindinghandlers.myselect = {
init: function (element, valueaccessor, allbindingsaccessor, viewmodel) {
},
update: function (element, valueaccessor, allbindingsaccessor, viewmodel) {
}
};

このように宣言するだけで、html タグでカスタム データバインドを使用できます。

<div> 
<select data-bind="myselect:$root">
<option id="1">研发部</option>
<option id="2">人事部</option>
<option id="3">行政部</option>
</select>
</div>

myselect はカスタム バインディング プロパティです。$root は当面の初期化として理解できます (ただし、この説明は厳密ではありません)。もっと合理的な説明がある場合は、修正してください）。

コードの説明: カスタム バインディング属性は、上記の ko.bindinghandlers を通じて簡単に実装できます。次の 2 つの点について説明する必要があります:

• 名前が示すように、initカスタム バインディングを初期化します。定義されており、複数のパラメーターが含まれています。通常、最初の 2 つのパラメーターがより頻繁に使用されます。最初のパラメーターはカスタム バインドされた dom 要素の初期化を表し、2 番目のパラメーターは通常、初期化パラメーターを渡すために使用されます。
•更新、更新コールバックは、対応する監視属性が変更されたときにこのメソッドに入ります。コールバックが必要ない場合は、このメソッドを宣言しないままにすることができます。

ここで、ブロガーは、以前に共有されたドロップダウン ボックス コンポーネント mutiselect に基づくカスタム バインディングの使用方法を簡単に説明します。

6.1. 最も単純な mutiselect

一般に、いくつかの共通コンポーネントをカプセル化するために ko を使用する必要がある場合、次のことが必要です。次のブロガーが、これを mutiselect コンポーネントと組み合わせて使用​​する方法を説明します。

最初にカスタム ko.bindinghandlers を宣言し、init メソッドで select タグを初期化します。

ko.bindinghandlers.myselect = {
init: function (element, valueaccessor, allbindingsaccessor, viewmodel) {
$(element).multiselect();
},
update: function (element, valueaccessor, allbindingsaccessor, viewmodel) {
}
};

次に使用します

<div style="text-align:center;"> 
<select data-bind="myselect:$root">
<option id="1">研发部</option>
<option id="2">人事部</option>
<option id="3">行政部</option>
</select>
</div>

最後の 3 番目の部分、バインディングのアクティブ化

$(function () {
var multiselect = {};
ko.applybindings(multiselect);
});

パラメータを渡す必要がない場合は、ここで空のビューモデルをバインドするだけで済みます。混乱している人もいますが、3 番目の部分には実際的な意味はないようです。ブロガーの理解では、dom 要素はデータ バインドに data-bind を使用する必要があり、ko バインディング (ここでは ko.applybindings() ) が有効になっている必要があります。

最初のステップは ko.bindinghandlers をカスタマイズすることです

ko.bindinghandlers.myselect = {
init: function (element, valueaccessor, allbindingsaccessor, viewmodel) {
var oparam = valueaccessor();
$(element).multiselect(oparam);
},
update: function (element, valueaccessor, allbindingsaccessor, viewmodel) {
}
};

2 番目のステップは上記と同じです。 html タグ このカスタム バインディングは内部で使用されます。

3 番目のステップは、バインディングをアクティブにするときにパラメータを渡すことです

$(function () {
var MultiSelect = {
enableClickableOptGroups: true,//收起分组
onChange: function (option, checked) {
alert("选择改变");
}
};
ko.applyBindings(MultiSelect);
});

これを通じて3 つの手順で、パラメータを mutiselect の初期化に渡すことができます。

コードの説明: init イベントの 2 番目のパラメータ、つまりメイン関数です。ビューモデルに渡されたパラメータを取得するためのものですが、ここではメソッドとして使用されています。なぜこのように使用されるのかはまだ研究の余地があります。

2. 追加、削除、変更、確認の最初の例

ここまで ようやく基礎が整いました。当初は 1 つの記事で終える予定でしたが、基礎がこれほど多くのページにまたがるとは予想していませんでした。追加、削除、変更、確認の例は次の記事に掲載します. bootstraptable と knockoutjs を組み合わせて、追加、削除、変更、確認機能を実装します [2]. 学習と交換は大歓迎です、そしてもちろん推奨事項も歓迎です！