Knockout.js随手记(8)
2013-07-31 22:28
225 查看
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随手记(4)
- Knockout.js随手记(7)
- Knockout.js随手记(6)
- Knockout.js随手记(2)
- Knockout.js随手记(1)
- Knockout.js随手记(7)
- Knockout.js随手记(2)
- Knockout.js随手记(5)
- Knockout.js随手记(7)
- Knockout.js随手记(3)
- (更新)knockout.js学习——1.2例子——绑定的详细语法
- knockout.js的学习笔记4
- Knockout.js及MVVM模式介绍
- Knockout.Js官网学习(数组observable)
- Knockout.Js官网学习(创建自定义绑定)
- knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页
- Knockout.Js官网学习(event绑定、submit绑定)
- Knockout.Js官网学习(value绑定)
- Knockout.Js官网学习(创建自定义绑定)
- Knockout.js 数据验证之插件版和无插件版