visible, disable, css綁定
這個例子非常簡單，主要示範如何通過屬性控制html元素的顯示與否（visible），可用性（disable）以及根據屬性添加相應的CSS樣式。
先簡單的看一段代碼：
<p>
<input id="isvip" type='checkbox' data-bind="checked: isVip" /><label for="isvip">是否是會員</label>
</p>
<p>
你的使用者名是:
<input type='text' data-bind="value: username, enable: isVip,css: {account: username().indexOf('G')>-1}"/>
<span data-bind="visible: isVip">尊貴的會員歡迎你通路!</span>
</p> 這段代碼幾乎不需要解釋，非常的簡單易懂，就是控制input元素的可用性，根據其中的文本添加樣式，和控制隐藏元素的顯示。
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<script src="~/Scripts/jquery-2.0.3.js"></script>
<script src="~/Scripts/knockout-2.3.0.js"></script>
<style type="text/css">
.account {
border-bottom-color:#0094ff;
background-color:#b6ff00;
border-bottom-width:2px;
}
</style>
</head>
<body>
<p>
<input id="isvip" type='checkbox' data-bind="checked: isVip" /><label for="isvip">是否是會員</label>
</p>
<p>
你的使用者名是:
<input type='text' data-bind="value: username, enable: isVip,css: {account: username().indexOf('G')>-1}"/>
<span data-bind="visible: isVip">尊貴的會員歡迎你通路!</span>
</p>
<script type="text/javascript">
function ViewModel() {
var self = this;
self.isVip = ko.observable(false);
self.username = ko.observable("halower@@");
}
$(function () {
ko.applyBindings(new ViewModel());
});
</script>
</body>
</html> 運作效果
備注：
本文版權歸大家共用，不歸本人所有，所有知識都來自于官網支援，書本，國内外論壇，大牛分享等等......後續将學習knockout.js的常用功能。
如果你喜歡本文的話，推薦共勉，謝謝！
![Knockout.js随手記(5)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)