Knockout.js/valueバインディング

提供: MonoBook
移動: 案内検索

Knockout.jsvalueバインディングとは、パラメーターの値(ビューモデル内のプロパティ名)と、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>

関連項目[編集]

参考文献[編集]

外部リンク[編集]