KnockoutJS-チェック済みバインディング

このバインディングは、チェック可能なフォーム要素とViewModelプロパティ間のリンクを作成するために使用されます。ほとんどの場合、これらのフォーム要素にはチェックボックスとラジオボタンが含まれます。これは、ユーザーがフォームコントロールをチェックした瞬間に、それぞれのViewModelプロパティが変更され、その逆も行われる双方向のバインド方法です。

構文

checked: <binding-value>

パラメーター

主なパラメータ

チェック可能要素の状態はパラメーター値に設定されます。以前の値は上書きされます。
チェックボックス-ViewModelパラメータ値がtrueの場合、DOM要素がチェックされ、falseの場合はオフになります。ゼロ以外の数字、空でない文字列、およびnull以外のオブジェクトは真のブール値で解釈されますが、未定義、ゼロ、および空の文字列は偽の値と見なされます。
ラジオボタン-ラジオボタンは文字列形式で機能します。つまり、パラメーター値がラジオボタンノードの値と正確に一致する場合にのみ、KnockoutJSは要素の値を設定します。ユーザーが新しいラジオボタンの値を選択すると、プロパティに新しい値が設定されます。
パラメータがオブザーバブルの場合、要素の値は、基礎となるオブザーバブルが変更されたときにチェックまたはチェック解除されます。オブザーバブルが使用されていない場合、要素は1回だけ処理されます。

追加パラメーター

checkedValue -checkedValueオプションは、要素の値属性の代わりに、checkedbindingが使用する値を保持するために使用されます。これは、チェックされた値が文字列以外の場合（整数やオブジェクトなど）に非常に便利です。

たとえば、それぞれのチェックボックスがオンになっている場合、アイテムオブジェクト自体がselectedValue配列に含まれる次のコードスニペットを見てください。

<!-- ko foreach: items -->
   <input type = "checkbox" data-bind = "checkedValue: $data,
      checked: $root.chosenValue"/>
   <span data-bind = "text: itemName"></span>
<!--/ko -->

<script type = "text/javascript">
   var viewModel = {

      itemsToBeSeen: ko.observableArray ([
         { itemName: 'Item Number One' },
         { itemName: 'Item Number Two' }
      ]),

      chosenValue: ko.observableArray()
   };
</script>

checkedValueパラメーターがObservable値である場合、基になる値が変更されるたびに、バインディングはチェックされたモデルプロパティを更新します。ラジオボタンの場合、KOはモデル値を更新するだけです。チェックボックスの場合、古い値が新しい値に置き換えられます。

例

チェックボックスコントロールの使用方法を示す次の例を見てみましょう。

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

   <body>
      <p> The required files are installed.
      Please check below to complete installation</p>

      <p><input type = "checkbox" data-bind = "checked: agreeFlag"/>
      I agree to all terms and conditions applied.</p>

      <button data-bind = "enable: agreeFlag">Finish</button>

      <script type = "text/javascript">
         function ViewModel() {
            this.agreeFlag =  ko.observable(false)      //Initially unchecked
         };

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

   </body>
</html>

出力

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

上記のコードを checked-checkbox-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
[完了]ボタンは、ユーザーが契約条件に同意した場合にのみアクティブになります。

例

ラジオボタンコントロールの使用を示す以下の例を見てみましょう-

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

   <body>
      <p> Select gender type from below:</p>
      <div><input type = "radio" name = "gender" value = "Male"
         data-bind = "checked: checkGender"/> Male</div>

      <div><input type = "radio" name = "gender" value = "Female"
         data-bind = "checked: checkGender"/> Female</div>

      <div><p>You have selected: <span
         data-bind = "text:checkGender "></span></p></div>

      <script type = "text/javascript">
         function ViewModel () {
            checkGender =  ko.observable("Male")    //Initially male is selected
         };

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

   </body>
</html>

出力

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

上記のコードを checked-radio-button-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
ラジオボタンには、性別タイプの値が保持されます。

Knockoutjs-checked-binding

目次

KnockoutJS-チェック済みバインディング

構文

パラメーター

主なパラメータ

追加パラメーター

例

出力

例

出力