KnockoutJS-スタイルバインディング

スタイルバインディングを使用すると、CSSクラスを適用する代わりに要素のスタイル属性を操作して、HTML DOM要素にインラインスタイルを適用できます。このバインディングには、インラインスタイリングのためにキーと値のペアが必要です。

構文

style: <binding-object>

パラメーター

JavaScriptオブジェクトは、プロパティ名がスタイル属性を参照し、値が要素に適用される必要な値を参照するパラメーターとして渡される必要があります。
複数のスタイルを一度に適用することもできます。あなたのViewModelに割引プロパティがあり、それを追加したい場合、コードは次のようになります-

<div data-bind = "style: {
   color: productStock() < 0 ? 'red' : 'blue',
   fontWeight: discount() ? 'bold' : 'normal'
}>

productStockが利用できない場合、フォントは赤になります。そうでなければ、青になります。割引がtrueに設定されている場合、製品の詳細は太字フォントになります。そうでない場合、通常のフォントのままになります。

ViewModelプロパティが監視可能な場合、新しい更新されたパラメーター値に応じてスタイルが適用されます。観察可能な値ではない場合、スタイルは初めて一度だけ適用されます。

例

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

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

   <body>
      <div data-bind = "style: { color: productStock() < 0 ? 'red' : 'black' }">
         Product Details.
      </div>

      <script type = "text/javascript">
         function AppViewModel() {
            this.productStock = ko.observable(30000)//initially black as positive value
            this.productStock(-10);                 //now changes DIV's contents to red
         };

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

   </body>
</html>

出力

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

上記のコードを style-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
productStockが0未満になると、Product Detailsが赤になります。それ以外の場合、在庫がある場合は黒になります。

観察

不正なJavaScript変数名

CSSスタイル名 font-weight はJavaScriptでは使用できません。代わりに、 fontWeight のように記述します（変数名のハイフンはJavaScriptでは使用できません）。

http://www.comptechdoc.org/independent/web/cgi/javamanual/javastylel [ここをクリック]すべてのJavaScriptスタイル属性については、KOの公式サイトでも入手できます。

Knockoutjs-style-binding

KnockoutJS-スタイルバインディング

構文

パラメーター

例

出力

観察

不正なJavaScript変数名

目次