这个例子非常简单，主要演示如何通过属性控制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-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>
