KnockoutJS-textInputバインディング

このバインディングは、テキストボックスまたはテキストエリアとViewModelプロパティの間の双方向バインディングを作成するために使用されます。このバインディングと値バインディングの違いは、このバインディングにより、HTML DOMからさまざまな入力タイプの即時更新が利用可能になることです。

構文

textInput: <binding-value>

パラメーター

HTML DOM要素のvalueプロパティはパラメーター値に設定されます。以前の値は上書きされます。
パラメータが数値または文字列（オブジェクトや配列など）以外の場合、表示されるテキストは文字列形式と同等です。
パラメータがオブザーバブルの場合、要素の値は、基礎となるオブザーバブルが変更されると更新されます。オブザーバブルが使用されていない場合、要素は1回だけ処理されます。
ほとんどの場合、textInputは、すべての入力タイプに対してDOMからのライブ更新を提供するtextInputの能力と、ブラウザーの奇妙な動作を処理する能力があるため、値バインディングよりも優先されます。

例

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

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

   <body>
      <p> Enter your reviews here: <br><br><textarea rows=5
      data-bind = "textInput: someReview" ></textarea><br></p>

      <p> You entered : <span data-bind = "text: someReview"></span></p>

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

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

   </body>
</html>

出力

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

上記のコードを textinput-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
textareaに入力されたデータは、ViewModelですぐに更新されます。

観察

textInput vs値バインディング

textInputバインディングは、即時のライブ更新を提供します。 textInputと値バインディングの主な違いは次のとおりです-

即時更新-デフォルトでは、ユーザーがテキストボックスからフォーカスを移動したときにのみ値バインディングはモデルを更新します。 textInputバインディングは、各キーストロークの後、または他のテキスト入力メカニズムでモデルを即座に更新します。

ブラウザイベントの奇妙さの処理-ブラウザは、ドラッグ、カット、オートコンプリートの提案を許可するなどの異常なテキスト入力メカニズムに応じて起動するイベントでは非常に予測不能です。値バインディングは、すべてのブラウザーですべてのテキスト入力ケースを処理するわけではありません。

textInputバインディングは、ブラウザのさまざまな奇妙な動作を処理するように特に設計されています。このようにして、異常なテキスト入力メカニズムの場合でも、一貫性のあるインスタントモデル更新を提供します。

Knockoutjs-textinput-binding

KnockoutJS-textInputバインディング

観察

textInput vs値バインディング