「Knockout.js/visibleバインディング」の版間の差分
imported>Administrator ページの作成：「Knockoutの'''visible'''バインディングとは、DOM要素に結び付けられたモデルの値に応じて、DOM要素が表示または非表示になる...」 |
imported>Administrator |
||
| (同じ利用者による、間の9版が非表示) | |||
| 1行目: | 1行目: | ||
[[Knockout]]の''' | [[Knockout.js]]の'''visibleバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]要素を表示または非表示にする[[Knockout.js/可視バインディング|可視バインディング]]のひとつである。 | ||
== パラメーター == | == パラメーター == | ||
=== false === | |||
値がfalse系の場合 （false、数字の「0」、null、undefined）の場合には、domElement.style.displayにnoneに設定し、項目を非表示にする。 | |||
=== true === | |||
値がtrue系（true、非nullのオブジェクト、配列）の場合には、domElement.style.displayを削除し、項目を非表示にする。 | |||
=== ノート === | |||
[[JavaScript]]で動的に上書きするので、あらかじめ[[CSS]]で設定したスタイルよりも優先されるので注意すること。 | [[JavaScript]]で動的に上書きするので、あらかじめ[[CSS]]で設定したスタイルよりも優先されるので注意すること。 | ||
非表示から表示になる際は「スタイル設定の削除」なので、たとえばdivのstyle.displayにinlineを設定していると、divのstyle.displayのデフォルト値であるblockになってしまう。 | 非表示から表示になる際は「スタイル設定の削除」なので、たとえばdivのstyle.displayにinlineを設定していると、divのstyle.displayのデフォルト値であるblockになってしまう。 | ||
[[Knockout/ | [[Knockout.js/observable関数|observable関数]]でない値をバインディングした場合は、バインディング適用時（[[Knockout.js/applyBindings関数|applyBindings関数]]実行時）に1回だけ更新されて以降は更新されない。 | ||
== 使用例 == | == 使用例 == | ||
| 33行目: | 27行目: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
jQuery(function() { | jQuery(function() { | ||
// | // ビューモデル | ||
var AppViewModel = function() { | var AppViewModel = function() { | ||
this.shouldShowMessage = ko.observable(true); | this.shouldShowMessage = ko.observable(true); | ||
| 64行目: | 58行目: | ||
== 関連項目 == | == 関連項目 == | ||
* [[Knockout]] | * [[Knockout.js]] | ||
** [[Knockout.js/可視バインディング|可視バインディング]] | |||
** [[Knockout.js/制御フローバインディング|制御フローバインディング]] | |||
== 参考文献 == | == 参考文献 == | ||
<references/> | <references/> | ||