差分
ページの作成：「Knockout.jsの'''valueバインディング'''とは、パラメーターの値（ビューモデル内のプロパティ名）と、DOM要素のvalueプロパ...」
[[Knockout.js]]の'''valueバインディング'''とは、パラメーターの値（ビューモデル内のプロパティ名）と、[[DOM]]要素のvalueプロパティをリンクする[[Knockout.js/操作バインディング|操作バインディング]]のひとつである。
== 注意 ==
主に[[HTML]]のselectタグやinputタグのvalueプロパティをビューモデルの値と同期するのに用いる。
なお、selectタグにmultipleプロパティが設定されている場合は、valueバインディングではなく、[[Knockout.js/selectedOptionsバインディング|selectedOptionsバインディング]]と[[Knockout.js/observableArrayオブジェクト|observableArrayオブジェクト]]を用いること。
また、チェックボックスまたはラジオボタンを使用している場合は、valueバインディングではなく、[[Knockout.js/checkedバインディング|checkedバインディング]]を用いること。
== パラメーター ==
valueバインディングの基本的な書式は以下のとおりである。
<source lang="html5">
<input type="text" data-bind="value: ビューモデルのプロパティ名" />
</source>
パラメーター（ビューモデル内のプロパティ）とDOM要素とリンクし、パラメーターが[[Knockout.js/observableオブジェクト|observableオブジェクト]]の場合は、以後[[ビューモデル]]の[[プロパティ]]を更新すれば、ビュー（[[HTML]]）の値も更新され、同様にビュー（HTML）の値が変更されると、ビューモデルのプロパティの値も更新されるようになる。
パラメーターが[[Knockout.js/observableオブジェクト|observableオブジェクト]]でない場合はバインディング適用時（[[Knockout/applyBindings関数|applyBindings関数]]実行時）に1回だけ更新されて以降は更新されない。
=== 追加パラメーター ===
==== valueUpdate ====
valueUpdateパラメーターを設定することで、knockout.jsがイベントを検出するタイミング（ビューの更新を検出するタイミング）を設定することができる。デフォルトではchange（フォーカスが他のコントロールに移ったとき）となっている。
* change - valueUpdateパラメーターを設定しないときのデフォルト値。valueバインディングが設定されているコントロールから別のコントロールへフォーカスが移ったタイミングで更新する。なおselect要素の場合は選択完了ですぐに更新する。
* keyup - キーが離されたタイミングで更新する。
* keypress - キーが押されたタイミングで更新する。ブラウザごとに挙動が違うのでおすすめできない。
* afterkeydown - キーが押された直後に更新する。
基本的には「afterkeydown」→「keypress」→「keyup」の順序でイベントが発生する。ビューの変更をリアルタイムにビューモデルへ反映したい場合には「afterkeydown」がマジオススメ。
== 使用例 ==
<source lang="html5">
<!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>
</source>
== 関連項目 ==
* [[Knockout.js]]
** [[Knockout.js/可視バインディング|可視バインディング]]
** [[Knockout.js/制御フローバインディング|制御フローバインディング]]
** [[Knockout.js/操作バインディング|操作バインディング]]
== 参考文献 ==
<references/>
== 外部リンク ==
{{stub}}
== 注意 ==
主に[[HTML]]のselectタグやinputタグのvalueプロパティをビューモデルの値と同期するのに用いる。
なお、selectタグにmultipleプロパティが設定されている場合は、valueバインディングではなく、[[Knockout.js/selectedOptionsバインディング|selectedOptionsバインディング]]と[[Knockout.js/observableArrayオブジェクト|observableArrayオブジェクト]]を用いること。
また、チェックボックスまたはラジオボタンを使用している場合は、valueバインディングではなく、[[Knockout.js/checkedバインディング|checkedバインディング]]を用いること。
== パラメーター ==
valueバインディングの基本的な書式は以下のとおりである。
<source lang="html5">
<input type="text" data-bind="value: ビューモデルのプロパティ名" />
</source>
パラメーター（ビューモデル内のプロパティ）とDOM要素とリンクし、パラメーターが[[Knockout.js/observableオブジェクト|observableオブジェクト]]の場合は、以後[[ビューモデル]]の[[プロパティ]]を更新すれば、ビュー（[[HTML]]）の値も更新され、同様にビュー（HTML）の値が変更されると、ビューモデルのプロパティの値も更新されるようになる。
パラメーターが[[Knockout.js/observableオブジェクト|observableオブジェクト]]でない場合はバインディング適用時（[[Knockout/applyBindings関数|applyBindings関数]]実行時）に1回だけ更新されて以降は更新されない。
=== 追加パラメーター ===
==== valueUpdate ====
valueUpdateパラメーターを設定することで、knockout.jsがイベントを検出するタイミング（ビューの更新を検出するタイミング）を設定することができる。デフォルトではchange（フォーカスが他のコントロールに移ったとき）となっている。
* change - valueUpdateパラメーターを設定しないときのデフォルト値。valueバインディングが設定されているコントロールから別のコントロールへフォーカスが移ったタイミングで更新する。なおselect要素の場合は選択完了ですぐに更新する。
* keyup - キーが離されたタイミングで更新する。
* keypress - キーが押されたタイミングで更新する。ブラウザごとに挙動が違うのでおすすめできない。
* afterkeydown - キーが押された直後に更新する。
基本的には「afterkeydown」→「keypress」→「keyup」の順序でイベントが発生する。ビューの変更をリアルタイムにビューモデルへ反映したい場合には「afterkeydown」がマジオススメ。
== 使用例 ==
<source lang="html5">
<!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>
</source>
== 関連項目 ==
* [[Knockout.js]]
** [[Knockout.js/可視バインディング|可視バインディング]]
** [[Knockout.js/制御フローバインディング|制御フローバインディング]]
** [[Knockout.js/操作バインディング|操作バインディング]]
== 参考文献 ==
<references/>
== 外部リンク ==
{{stub}}