KnockoutJS-バインディングを有効にする

このバインディングは、指定された条件に基づいて特定のDOM要素を有効にするために使用されます。これは、 input 、 select 、 textarea などのフォーム要素で役立ちます。

構文

enable: <binding-value>

パラメーター

パラメーターは、要素を有効にするかどうかを決定するブール値のような値で構成されます。パラメーターがtrueまたはtrueのような値の場合、要素は有効です。
非ブール値は、緩やかなブール値と見なされます。意味0とnullはfalseのような値と見なされ、整数オブジェクトと非nullオブジェクトはtrueのような値と見なされます。
パラメータの条件に観測可能な値が含まれている場合、観測可能な値が変化するたびに条件が再評価されます。同様に、条件の結果に基づいて、関連するマークアップが有効になります。

例

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

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

   <body>
      <p> Enter your feedback here:<br><br>
         <textarea rows = 5 data-bind = "value: hasFeedback,
            valueUpdate: 'afterkeydown'" ></textarea>
      </p>

      <p><button data-bind = "enable: hasFeedback">Save Feedback</button></p>

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

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

   </body>
</html>

出力

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

上記のコードを enable-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
保存ボタンは、ユーザーがフィードバックを入力した場合にのみ有効になります。

ランダム式を使用して有効バインディングを実装する

ランダム式を使用して、要素を有効にするかどうかを決定することもできます。

例

イネーブルバインディングを呼び出すランダム式の使用を示す次の例を見てみましょう。

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

   <body>
      <p>Below button will be enabled only when product stock is available.</p>
      <button data-bind = "enable: productStock() > 0 ">
         Product Details
      </button>

      <script type = "text/javascript">
         function AppViewModel() {
            this.productStock = ko.observable(-10);
         };

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

   </body>
</html>

出力

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

上記のコードを enable-random-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
[製品の詳細]ボタンは、製品の在庫が利用可能な場合にのみ有効になります。

Knockoutjs-enable-binding

KnockoutJS-バインディングを有効にする

ランダム式を使用して有効バインディングを実装する