完敗だぜ!knockoutでノックアウト – バインディング編

みなさんこんにちは。江口です。
 
前回は Observable編2 でした。今回は KnockoutJS で提供されているバインディングを簡単にひと通り紹介します。
KnockoutJSでは、データとUIをより簡単に結びつけるためにバインディングの機能を提供しています。標準で22 種類の強力なバインディングが提供されているため、データの状態をさまざまな方法でUI上に表現する事ができるようになっています。 

テキストと外観の制御(Controlling text and appearance)

テキストや要素のスタイル、属性の制御に利用できるバインディングは以下の6種類が提供されています。

visible

要素の表示・非表示の切り替えに使用できるバインディングです。
パラメータの値が true (または 0, null, undefined以外)の場合は要素が表示、それ以外の場合は非表示にさせることができます。
 

 text

データをテキストとして表示するのに使用できるバインディングです。
パラメータの値に null または undefined を指定した場合のテキストは空文字になります。

 バインディングにspanタグなどの要素を使用したくない場合は、コメント要素にバインディングを使用することも出来ます。

 html

データをDOM要素として設定するのに使用できるバインディングです。
パラメータに指定された値をinnerHtmlの値に設定します。

 css

要素のクラス属性を制御するのに使用できるバインディングです。
パラメータの値が true (または 0, null, undefined以外)の場合に要素の class に適用されます。

 一つの要素に複数のクラスを設定することも出来ます。

 style

要素にスタイル属性を追加・削除するのに使用できるバインディングです。
スタイル名と設定する値を指定すると、その要素に直接スタイルが適用されます。

スタイル名の文字には”-“を使用できないので、キャメルケースで指定する必要があります。
 
font-weight -> fontWeight

 attr

要素に任意の属性を追加・削除するのに使用できるバインディングです。
属性名と設定する値を指定すると、その要素の属性に設定されます。

フロー制御(control flow) 

 DOM 構造の制御に利用できるバインディングは以下の4種類が提供されています。

foreach

要素を繰り返しコピーするのに使用できるバインディングです。
値に指定した配列もしくはobservableArrayの長さ分だけ、バインディングを設定した要素の子孫が繰り返し生成されます。foreach バインディング内では $index という特別なプロパティで、現在のインデックスの値を取り出すことが出来ます。

 text バインディングと同じく、コメント要素にバインディングを使用することも出来ます。

 if / ifnot

要素の追加・削除に使用できるバインディングです。
パラメータの値が true (または 0, null, undefined以外)の場合は要素が表示、それ以外の場合は非表示にさせることができます。
visible バインディングとは異なり、バインディングを設定した要素の子孫要素が操作の対象になります。また、DOMツリーから子孫要素自体が取り除かれます。

 コメント要素にバインディングを使用することも出来ます。

with

バインディングコンテキストの制御に使用できるバインディングです。
foreach バインディングや template バインディングが暗黙的に生成するバインディングコンテキストですが、それを任意の要素を指定して生成できるバインディングです。ViewModel が大きい場合に、内部を分割してスコープを小さくすることで可読性やメンテナンス性を上げることが出来ます。

 上の例で with バインディングを使用しなかった場合は以下の様なコードになります。

フォーム要素(Working with form fields) 

 input や select などのフォーム要素の制御や、マウスクリックを始めとしたイベントへのイベントハンドラの設定に利用できるバインディングは以下の11種類が提供されています。

click

onClick イベントのイベントハンドラを設定できるバインディングです。
指定した関数が、クリックイベントの発生時に呼び出されます。

 foreach バインディング内で click バインディングや event バインディングを使用した場合、関数の第一引数に foreach の配列内の対応するオブジェクトが渡されます。

 clickBubble を設定すると、イベント伝播を止めることが出来ます。

event

任意のイベントのイベントハンドラを設定できるバインディングです。
指定した関数が、イベントの発生時に呼び出されます。

 イベント名 + ‘Bubble’ を設定すると、イベント伝播を止めることが出来ます。

 submit

onsubmit イベントのイベントハンドラを設定できるバインディングです。
指定した関数が、onsubmit イベントの発生時に呼び出されます。

 enable / disable

要素の disabled 属性の制御できるバインディングです。
input タグ、select タグ、textarea タグに設定することが出来ます。enable バインディングはパラメータの値が true (または 0, null, undefined以外)の場合はユーザが値を変更可能な状態になり、それ以外の場合は変更不可能にさせることができます。disable バインディングはその逆です。

value

要素の value 属性の制御できるバインディングです。
input タグ、select タグ、textarea タグに設定することが出来ます。チェックボックスもしくはラジオボタンには checked バインディングを使用します。
value バインディングは双方向にバインディングを行うため、UI上の値が変更されると ViewModel の値が observable であれば自動的に更新されます。

hasFocus

要素のフォーカスの制御できるバインディングです。
input タグなどのフォーカスを設定できる要素に設定することが出来ます。
hasFocus バインディングも双方向にバインディングを行うため、UI上でフォーカスが設定されると ViewModel の値が observable であれば自動的に更新されます。

checked

チェックボックス/ラジオボタンの状態の制御できるバインディングです。
双方向にバインディングを行うため、UI上で状態が変更されると ViewModel の値が observable であれば自動的に更新されます。

options

select 要素の選択肢の制御できるバインディングです。
指定した配列または ObservableArray 内の要素が選択肢として表示されます。 

selectedOptions

select 要素の選択項目の設定・取得ができるバインディングです。
双方向にバインディングを行うため、UI上で状態が変更されると ViewModel の値が observable であれば自動的に更新されます。

uniqueName

要素にユニークな name 属性を設定できるバインディングです。

テンプレート(Rendering templates) 

 テンプレートの定義・描画に利用できるバインディングとして template バインディングが提供されています。

パラメータで指定された名前のテンプレートに、データをバインドしてDOMツリーを追加します。テンプレートの定義は script タグ内に定義し、id 属性でテンプレート名を設定します。

 データに配列または observableArray を使用する場合は、data ではなく foreach でデータを指定します。

また、テンプレートは observable な値や関数を name に設定することで、動的に変更することが出来ます。 

name に関数を設定した場合は、データの内容に応じてテンプレートを切り替えるといったようなことが出来ます。

 以上、簡単にでしたが、KnockoutJS で提供されているバインディングの紹介でした。
 
 

より良いチームワークを生み出す

チームの創造力を高めるコラボレーションツール

製品をみる