「Knockout.js/visibleバインディング」の版間の差分
ナビゲーションに移動
検索に移動
imported>Administrator |
imported>Administrator (→使用例) |
||
(同じ利用者による、間の3版が非表示) | |||
1行目: | 1行目: | ||
− | [[Knockout]]の'''visibleバインディング''' | + | [[Knockout.js]]の'''visibleバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]要素を表示または非表示にする[[Knockout.js/可視バインディング|可視バインディング]]のひとつである。 |
== パラメーター == | == パラメーター == | ||
13行目: | 13行目: | ||
非表示から表示になる際は「スタイル設定の削除」なので、たとえば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回だけ更新されて以降は更新されない。 |
== 使用例 == | == 使用例 == | ||
27行目: | 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); | ||
58行目: | 58行目: | ||
== 関連項目 == | == 関連項目 == | ||
− | * [[Knockout]] | + | * [[Knockout.js]] |
+ | ** [[Knockout.js/可視バインディング|可視バインディング]] | ||
+ | ** [[Knockout.js/制御フローバインディング|制御フローバインディング]] | ||
+ | |||
== 参考文献 == | == 参考文献 == | ||
<references/> | <references/> |
2012年4月20日 (金) 08:10時点における最新版
Knockout.jsのvisibleバインディングとは、パラメーターの値に応じ、関連付けられたDOM要素を表示または非表示にする可視バインディングのひとつである。
パラメーター[編集 | ソースを編集]
false[編集 | ソースを編集]
値がfalse系の場合 (false、数字の「0」、null、undefined)の場合には、domElement.style.displayにnoneに設定し、項目を非表示にする。
true[編集 | ソースを編集]
値がtrue系(true、非nullのオブジェクト、配列)の場合には、domElement.style.displayを削除し、項目を非表示にする。
ノート[編集 | ソースを編集]
JavaScriptで動的に上書きするので、あらかじめCSSで設定したスタイルよりも優先されるので注意すること。
非表示から表示になる際は「スタイル設定の削除」なので、たとえばdivのstyle.displayにinlineを設定していると、divのstyle.displayのデフォルト値であるblockになってしまう。
observable関数でない値をバインディングした場合は、バインディング適用時(applyBindings関数実行時)に1回だけ更新されて以降は更新されない。
使用例[編集 | ソースを編集]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockout.js - visible bindding sample 1</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.0.0.js"></script>
<script type="text/javascript">
jQuery(function() {
// ビューモデル
var AppViewModel = function() {
this.shouldShowMessage = ko.observable(true);
this.showMessage = function() {
this.shouldShowMessage(true);
};
this.hideMessage = function() {
this.shouldShowMessage(false);
};
}
// バインディング適用
ko.applyBindings(new AppViewModel());
});
</script></head>
<body>
<div data-bind="visible: shouldShowMessage">
このメッセージは "shouldShowMessage" の値がtrue系の場合にのみ表示されます。
</div>
<div>
<button data-bind="click: showMessage">表示</button>
<button data-bind="click: hideMessage">非表示</button>
</div>
</body>
</html>