KnockoutJS-可視バインディング

名前が指定するように、このバインディングは、バインディングで渡された値に基づいて、関連付けられたDOM要素を表示または非表示にします。

構文

visible: <binding-condition>

パラメーター

パラメーターがfalseのような値（ブールfalse、0、null、undefinedなど）に変換されると、バインディングはyourElement.style.displayのdisplay：noneを設定して非表示にします。これは、CSSの既存のスタイルよりも優先されます。
パラメーターがtrueに似た値（ブールtrue、またはnull以外のオブジェクトや配列など）に変換されると、バインディングによってyourElement.style.display値が削除され、表示されます。
これが監視可能なプロパティである場合、バインディングはプロパティが変更されるたびに可視性を更新します。それ以外の場合は、可視性を1回だけ設定します。
パラメータ値は、JavaScript関数またはブール値を返す任意のJavaScript式にすることもできます。 DOM要素は、出力に基づいて表示または非表示になります。

例

次の例を見てみましょう。

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

   <body>
      <div data-bind = "visible: showMe">
         You are seeing this line because showMe function is set to true.
      </div>

      <script>
         function AppViewModel() {
            this.showMe = ko.observable(false); //hidden initially
         }

         var vm = new AppViewModel();
         ko.applyBindings(vm);                 // shown now
         vm.showMe(true);
      </script>

   </body>
</html>

出力

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

上記のコードを visible-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。

Knockoutjs-visible-binding

目次

KnockoutJS-可視バインディング

構文

パラメーター

例

出力