- visible是藉由css來hide，實際上DOM的elements依然存在的。
- hide是做了 display: none
<!DOCTYPE html>
<html>
<head>
<title>knockoutjs Visible Bind</title>
<meta charset="UTF-8"/>
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
$(document).ready(function(){
function ViewModel(visable){
this.shouldShowMessage = ko.observable(visable);
};
var myViewModel = new ViewModel(true);
ko.applyBindings(myViewModel);
$('#visableBtn').click(function(){
myViewModel.shouldShowMessage(true); // ... now it's visible again
});
$('#hiddenBtn').click(function(){
myViewModel.shouldShowMessage(false); // ... now it's hidden
});
});
</script>
</head>
<body>
<div data-bind="visible: shouldShowMessage">
You will see this message only when "shouldShowMessage" holds a true value.
</div>
</p>
<div>
<input id="visableBtn" type="button" value="顯示文字"/>
<input id="hiddenBtn" type="button" value="隱藏文字"/>
</div>
</body>
</html>
<html>
<head>
<title>knockoutjs Visible Bind</title>
<meta charset="UTF-8"/>
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
$(document).ready(function(){
function ViewModel(visable){
this.shouldShowMessage = ko.observable(visable);
};
var myViewModel = new ViewModel(true);
ko.applyBindings(myViewModel);
$('#visableBtn').click(function(){
myViewModel.shouldShowMessage(true); // ... now it's visible again
});
$('#hiddenBtn').click(function(){
myViewModel.shouldShowMessage(false); // ... now it's hidden
});
});
</script>
</head>
<body>
<div data-bind="visible: shouldShowMessage">
You will see this message only when "shouldShowMessage" holds a true value.
</div>
</p>
<div>
<input id="visableBtn" type="button" value="顯示文字"/>
<input id="hiddenBtn" type="button" value="隱藏文字"/>
</div>
</body>
</html>
使用google可以看到hide時：
<div data-bind="visible: shouldShowMessage" style="display: none; ">
You will see this message only when "shouldShowMessage" holds a true value.
</div>
- 當值設置為一個False值時 –
(例如：布爾值false， 數字值0， 或者null， 或者undefined） ,該綁定將設置該元素的style.display值為none，讓元素隱藏。它的優先級高於你在CSS裡定義的任何display樣式。
- 當值 設置為一個True值時 -
（例如：布爾值true，或者非空non-null的對像或者數組） ,該綁定會刪除該元素的style.display值，讓元素可見。然後你在CSS裡自定義的display樣式將會自動生效。
- 如果值是監控屬性observable的，那元素的visible狀態將根據參數值的變化而變化，如果不是，那元素的visible狀態將只設置一次並且以後不在更新。
沒有留言:
張貼留言