Knockoutjs-style-binding
提供:Dev Guides
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の公式サイトでも入手できます。