「Knockout.js/cssバインディング」を編集中
ナビゲーションに移動
検索に移動
この編集を取り消せます。 下記の差分を確認して、本当に取り消していいか検証してください。よろしければ変更を保存して取り消しを完了してください。
最新版 | 編集中の文章 | ||
1行目: | 1行目: | ||
− | [[Knockout | + | [[Knockout]]の'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]要素のCSSクラスを、追加または削除するバインディングのことである。 |
− | + | なお、CSSクラス単位ではなく、style属性の値を書き換えたい場合には[[Knockout/styleバインディング|styleバインディング]]を使う。 | |
== パラメーター == | == パラメーター == | ||
− | + | 基本的な書式は以下のとおりである。 | |
<source lang="html5"> | <source lang="html5"> | ||
− | <div data-bind="css: { CSSクラス名: | + | <div data-bind="css: { CSSクラス名: パラメーター値または式 }">...</div> |
</source> | </source> | ||
− | + | パラメーターの値または式の結果が、trueならばCSSクラスが追加され、falseならばCSSクラスが削除される。 | |
− | |||
− | |||
− | |||
− | |||
− | |||
なお、式を指定する場合の「式」とは[[JavaScript]]そのものなので関数なども使いたい放題である。 | なお、式を指定する場合の「式」とは[[JavaScript]]そのものなので関数なども使いたい放題である。 | ||
27行目: | 22行目: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
jQuery(function() { | jQuery(function() { | ||
− | // | + | // モデル |
var AppViewModel = function() { | var AppViewModel = function() { | ||
this.valueA = ko.observable(90); | this.valueA = ko.observable(90); | ||
51行目: | 46行目: | ||
== 関連項目 == | == 関連項目 == | ||
− | * [[Knockout | + | * [[Knockout]] |
− | |||
− | |||
== 参考文献 == | == 参考文献 == | ||
<references/> | <references/> |