「Knockout.js/visibleバインディング」を編集中
ナビゲーションに移動
検索に移動
この編集を取り消せます。 下記の差分を確認して、本当に取り消していいか検証してください。よろしければ変更を保存して取り消しを完了してください。
最新版 | 編集中の文章 | ||
1行目: | 1行目: | ||
− | [[Knockout | + | [[Knockout]]の'''visible'''バインディングとは、DOM要素に結び付けられたモデルの値に応じて、DOM要素が表示または非表示になる。 |
== パラメーター == | == パラメーター == | ||
− | + | 値がfalse系の場合には、domElement.style.displayにnoneに設定し、項目を非表示にする。 | |
− | + | * false系の値について | |
+ | ** false | ||
+ | ** 数字の「0」 | ||
+ | ** null | ||
+ | ** undefined | ||
− | + | 値がtrue系の場合には、domElement.style.displayを削除し、項目を非表示にする。 | |
− | + | * true系の値について | |
+ | ** true | ||
+ | ** 非nullのオブジェクト | ||
+ | ** 配列は中身に関係なくtrue扱い | ||
− | |||
[[JavaScript]]で動的に上書きするので、あらかじめ[[CSS]]で設定したスタイルよりも優先されるので注意すること。 | [[JavaScript]]で動的に上書きするので、あらかじめ[[CSS]]で設定したスタイルよりも優先されるので注意すること。 | ||
非表示から表示になる際は「スタイル設定の削除」なので、たとえばdivのstyle.displayにinlineを設定していると、divのstyle.displayのデフォルト値であるblockになってしまう。 | 非表示から表示になる際は「スタイル設定の削除」なので、たとえばdivのstyle.displayにinlineを設定していると、divのstyle.displayのデフォルト値であるblockになってしまう。 | ||
− | [[Knockout | + | [[Knockout/observable]]でない値をバインディングした場合は、バインディング実行時([[Knockout/applyBindings]]実行時)に1回だけ更新されて以降は更新されない。 |
== 使用例 == | == 使用例 == | ||
27行目: | 33行目: | ||
<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); | ||
58行目: | 64行目: | ||
== 関連項目 == | == 関連項目 == | ||
− | * [[Knockout | + | * [[Knockout]] |
− | |||
− | |||
− | |||
== 参考文献 == | == 参考文献 == | ||
<references/> | <references/> |