サンプル・アプリケーション †
HTML KnockoutJS HelloWorld と同じもの。ソースコード全文もそちらを参照
Observable †
- HTML
<p>First name: <input data-bind="value: firstName" title="個人名を入力してください" /></p>
<p>Last name : <input data-bind="value: lastName" title="姓を入力してください" /></p>
<p>Full name : <strong data-bind="text: fullName"></strong></p>
- View Model
this.firstName = ko.observable(mdl.firstName);
this.lastName = ko.observable(mdl.lastName);
- data-bind
- view (HTML) data-bind の value 属性で、view model のプロパティ名 firstName を指定する
- view model (javascript) 側では this.firstName = ko.observable(初期値) で、view にバインドするプロパティを作成する
- ko.applyBindings(new viewModel()); で、view model と view がバインドされる
- バインドされると、両者が連動するようになる
- ユーザによる view (<input type="text">) 変更が、view model (Javascript) も連動して変更される
- Javascript プログラムで、view model (this.firstName()) を変更すると view (HTML) も連動して変更される
- observable への i/o
- 値の書き込み : this.firstName('Lisa');
- 値の取り出し : mdl.firstName = this.firstName();
Computed Observable †
- HTML
<p>First name: <input data-bind="value: firstName" title="個人名を入力してください" /></p>
<p>Last name : <input data-bind="value: lastName" title="姓を入力してください" /></p>
<p>Full name : <strong data-bind="text: fullName"></strong></p>
- View Model
this.firstName = ko.observable(mdl.firstName);
this.lastName = ko.observable(mdl.lastName);
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName().toUpperCase();
}, this);
- ko.computed(function(){...}, this) で、observable() が変更された時に、連動して変更する表示項目を作ることができる
- function(){...} は、表示内容を返す
- knockout.js は、function(){...} 内で使われている observable() 変更時に function() を呼び出してくれる。
- 第二引数の this は、view model。もし指定しないと、this は、function(){...} になる
- ここでは、firstNmae または lastName が変更されたら fullName の表示内容が更新される
- 留意点 : 初回の this.fullName 実行で参照された Observable が監視対象になる。ko.computed(function(){...}) 内に条件分岐がある場合、分岐にかかわらず全ての Observable を参照するような作りにする (if の外で var param1 = this.param1(); とかする)
Observable Array †
- cf. HTML KnockoutJS data-bind2 foreach
- <table>, <select>, <ul><li> のように、繰り返し構造の値を持つ view コンポーネントには Observable Array をつかう
- ユーザによる view (HTML) 変更が、view model (Javascript) も連動して変更される
- Javascript プログラムで、view model (Javascript) を変更すると view (HTML) も連動して変更される
- ObserbableArray?() には、通常の Array() と同様の function() が用意されている
| メソッド | 概要 | |
| ObservableArray?.indexOf('ABC'); | Arrayからから一致するゼロベースインデックスを返す。ABC がなければ -1が返る | |
| ObservableArray?.slice(begin[,end]); | Arrayから begin番目〜end番目 の要素からなる Array を取り出す | |
| ObservableArray?.push('新しい値'); | 配列の末尾に要素を追加する | |
| ObservableArray?.pop(); | 配列から末尾の要素を削除・返却する | |
| ObservableArray?.unshift('新しい値'); | 配列の先頭に要素を挿入する | |
| ObservableArray?.shift(); | 配列から先頭の要素を削除・返却する | |
| ObservableArray?.reverse(); | 配列の要素順を反転する | |
| ObservableArray?.sort(); | 配列の要素をソートする | |
| ObservableArray?.splice(startIndex, length) | startIndex から length 個の要素を削除する | |
| ObservableArray?.remove(someItem); | Arrayから someItem を削除する | ObservableArray? による拡張 |
| ObservableArray?.remove(function(item){ return item < 18; }); | Arrayから function(item) が true を返す要素を削除する | ObservableArray? による拡張 |
| myObservableArray?.removeAll(['aa', bb, cc]); | Arrayから aa, bb, cc を削除する | ObservableArray? による拡張 |
| myObservableArray?.removeAll(); | Arrayから すべての要素を削除する | ObservableArray? による拡張 |
- indexOf(), slice() 以外のメソッドを実行すると、イベントとみなされて、view (HTML) に変更結果が反映される
HTML#Knockout
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
