Knockout.js/valueバインディング
Knockout.jsのvalueバインディングとは、パラメーターの値(ビューモデル内のプロパティ名)と、DOM要素のvalueプロパティをリンクする操作バインディングのひとつである。
注意
主にHTMLのselectタグやinputタグのvalueプロパティをビューモデルの値と同期するのに用いる。
なお、selectタグにmultipleプロパティが設定されている場合は、valueバインディングではなく、selectedOptionsバインディングとobservableArrayオブジェクトを用いること。
また、チェックボックスまたはラジオボタンを使用している場合は、valueバインディングではなく、checkedバインディングを用いること。
パラメーター
valueバインディングの基本的な書式は以下のとおりである。
<input type="text" data-bind="value: ビューモデルのプロパティ名" />
パラメーター(ビューモデル内のプロパティ)とDOM要素とリンクし、パラメーターがobservableオブジェクトの場合は、以後ビューモデルのプロパティを更新すれば、ビュー(HTML)の値も更新され、同様にビュー(HTML)の値が変更されると、ビューモデルのプロパティの値も更新されるようになる。
パラメーターがobservableオブジェクトでない場合はバインディング適用時(applyBindings関数実行時)に1回だけ更新されて以降は更新されない。
追加パラメーター
valueUpdate
valueUpdateパラメーターを設定することで、knockout.jsがイベントを検出するタイミング(ビューの更新を検出するタイミング)を設定することができる。デフォルトではchange(フォーカスが他のコントロールに移ったとき)となっている。
- change - valueUpdateパラメーターを設定しないときのデフォルト値。valueバインディングが設定されているコントロールから別のコントロールへフォーカスが移ったタイミングで更新する。なおselect要素の場合は選択完了ですぐに更新する。
- keyup - キーが離されたタイミングで更新する。
- keypress - キーが押されたタイミングで更新する。ブラウザごとに挙動が違うのでおすすめできない。
- afterkeydown - キーが押された直後に更新する。
基本的には「afterkeydown」→「keypress」→「keyup」の順序でイベントが発生する。ビューの変更をリアルタイムにビューモデルへ反映したい場合には「afterkeydown」がマジオススメ。
使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockout.js - valueバインディング 001</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.0.0.js"></script>
<script type="text/javascript">
jQuery(function() {
// ビューモデル
var AppViewModel = function() {
this.people = ko.observableArray([
{ name: 'Aさん', age: 18 },
{ name: 'Bさん', age: 28 },
{ name: 'Cさん', age: 38 }
]);
this.selectPeople = ko.observable(this.people()[1]);
this.selectPeopleAge = ko.computed(function() {
// 生年月日から計算して年齢を出力するとかにすると良いかも
var p = this.selectPeople();
return p.age;
}, this);
};
// バインディング適用
ko.applyBindings(new AppViewModel());
});
</script>
</head>
<body>
<select data-bind="options: people, optionsText: 'name', value: selectPeople"></select>
<div data-bind="text: selectPeople().name" ></div>
<div data-bind="text: selectPeopleAge" ></div>
</body>
</html>