KnockoutJS-値のバインド

このバインディングは、それぞれのDOM要素の値をViewModelプロパティにリンクするために使用されます。ほとんどの場合、これは input 、 select 、 textarea などの要素で使用されます。これはテキストバインディングと似ていますが、値バインディングデータの違いはユーザーが変更でき、ViewModelが自動的に更新します。

構文

value: <binding-value>

パラメーター

HTML DOM要素のvalueプロパティはパラメーター値に設定されます。以前の値は上書きされます。
パラメーターが観測可能な値である場合、要素の値は、基礎となる観測可能値が変更されると更新されます。オブザーバブルが使用されていない場合、要素は1回だけ処理されます。
valueUpdateは追加のパラメーターであり、追加の機能にも提供できます。 KOは、バインディングでvalueUpdateパラメーターが使用されている場合、追加のイベントを使用して追加の変更を検出します。以下は、いくつかの一般的なイベントです-
input -入力要素の値が変更されると、ViewModelが更新されます。
keyup -キーがユーザーによって解放されると、ViewModelが更新されます。
keypress -キーが入力されるとViewModelが更新されます。
afterkeydown -ViewModelは、ユーザーが文字の入力を開始するとすぐに更新を続けます。

例

値バインディングの使用を示す次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Value Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Enter your name:
         <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'"/>
      </p>

      <p>Your name is : <span data-bind = "text: yourName"></span></p>

      <script type = "text/javascript">
         function ViewModel () {
            this.yourName = ko.observable('');
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを value-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
valueUpdateの使用により、テキストボックスに入力されたデータはすぐに更新されます。

観察

入力からすぐに値の更新を受け取る

入力要素にViewModelの即時更新を提供する場合は、textInputバインディングを使用します。ブラウザの奇妙な動作を考慮して、valueUpdateオプションよりも優れています。

ドロップダウンリストの処理（<select>要素）

KOは、特別な方法でドロップダウンリスト（<select>要素）をサポートします。値バインディングとオプションバインディングは連携して動作し、文字列値だけでなくランダムなJavaScriptオブジェクトである値の読み取りと書き込みを可能にします。

<select>要素でvalueAllowUnsetを使用する

このパラメーターを使用すると、select要素に実際には存在しない値でモデルプロパティを設定できます。この方法では、ユーザーが初めてドロップダウンを表示するときにデフォルトオプションを空白のままにできます。

例

valueAllowUnsetオプションが使用されている次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Value Binding - working with drop-down lists</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Select a City:
         <select data-bind = " options: cities,
            optionsCaption: 'Choose City...',
            value: selectedCity,
            valueAllowUnset: true"></select>
      </p>

      <script type = "text/javascript">
         function ViewModel() {
            this.cities = ko.observableArray(['Washington D.C.', 'Boston', 'Baltimore']);
            selectedCity = ko.observable('Newark')
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを value-bind-drop-down ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
selectedCityには、リストにない値が割り当てられます。これにより、ドロップダウンが初めて空白になります。

観測可能なプロパティ値と観測不可能なプロパティ値の更新

値を使用してフォーム要素をObservableプロパティにリンクすると、KOは双方向バインディングを作成できるため、それらの間の変更はそれらの間で交換されます。

あなたが観察できないプロパティ（プレーン文字列またはJavaScript式）を使用する場合、KOは次のことを行います-

ViewModelで単純なプロパティを参照する場合、KOはフォーム要素の初期状態をプロパティ値に設定します。フォーム要素が変更されると、KOは新しい値をプロパティに書き戻しますが、プロパティの変更を検出できないため、一方向のバインディングになります。
比較の結果や関数呼び出しなど、単純でないものを参照すると、KOはフォーム要素の初期状態をその値に設定しますが、ユーザーがフォーム要素に加えた変更を書き込むことはできません。これをワンタイム値セッターと呼ぶことができます。

例

次のコードスニペットは、監視可能なプロパティと監視できないプロパティの使用を示しています。

<!-- Two-way binding. Populates textbox; syncs both ways. -->
<p>First value: <input data-bind="value: firstVal"/></p>

<!-- One-way binding. Populates textbox; syncs only from textbox to model. -->
<p>Second value: <input data-bind="value: secondVal"/></p>

<!-- No binding. Populates textbox, but doesn't react to any changes. -->
<p>Third value: <input data-bind="value: secondVal.length > 8"/></p>

<script type = "text/javascript">
   function viewModel() {
      firstVal =  ko.observable("hi there"),    //Observable
      secondVal = "Wats up!!!"                  //Not observable
   };
</script>

チェック済みバインディングでの値バインディングの使用

チェックバインディングに値バインディングを含めると、値バインディングはcheckedValueオプションのように動作し、チェックバインディングで使用できます。 ViewModelの更新に使用される値を制御します。

Knockoutjs-value-binding

目次