KnockoutJS-CSSバインディング

このバインディングにより、特定の条件に基づいてHTML DOM要素のCSSクラスを定義できます。これは、状況に応じていくつかのデータを強調表示する必要がある場合に役立ちます。

構文

css: <binding-object>

パラメーター

静的CSSバインディングの場合、パラメーターは、プロパティとその値で構成されるJavaScriptオブジェクトの形式にすることができます。
ここでの Property は適用されるCSSクラスを指し、 value はブール値のtrue、false、またはJavaScript式または関数です。
*クラス*は、計算された観測可能関数を使用して動的に適用することもできます。
複数のCSSクラスを一度に適用することもできます。以下は、2つのクラスがバインディングに追加される方法の例です。

<div data-bind = "css: {
   outOfStock : productStock() === 0,
   discountAvailable: discount
}">

クラス名は、「Discount Available」などの単一引用符で指定することもできます。
0とnullは偽の値として扱われます。数値およびその他のオブジェクトは真の値として扱われます。
ViewModelプロパティがオブザーバブルの場合、CSSクラスは新しく更新されたパラメーター値に応じて決定されます。観測可能な値ではない場合、クラスは初めて一度だけ決定されます。

例

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

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

      <style>
         .outOfStock {
            color: red;
            font-weight: bold;
         }
      </style>

   </head>

   <body>
      <div data-bind = "css: { outOfStock : productStock() === 0 }">
         Product Details.
      </div>

      <script>
         function AppViewModel() {
            this.productStock = ko.observable(0);
         }

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

   </body>
</html>

出力

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

上記のコードを css-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
productStockpropertyが0を超える場合、製品情報は通常の方法で表示されます。製品情報は赤く太字になります。 productStockが0になると。

Knockoutjs-css-binding

目次

KnockoutJS-CSSバインディング

構文

パラメーター

例

出力