Knockout.js随手记(8)
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随手记(8)的更多相关文章
- Knockout.js随手记(2)
计算属性 konckout.js的API文档,写的极为详细和生动,透过MVVM的运作原理,开发时只需专注于定义ViewModel逻辑,不需耗费心力处理TextBox.Select的onchange.o ...
- Knockout.js随手记(7)
数组元素的新增/移除事件 前两篇博客已经很清楚的知道knockout.js通过observableArray()数组元素增减,可以实时的反映在UI上.当然我们想在数组增加或移除元素时加上自定义逻辑就好 ...
- Knockout.js随手记(6)
实时反映对象属性的变化 在前一篇博客中我们使用了如下代码去新增user对象,即push方法: $("#btnAddUser").click(function () { vm.use ...
- Knockout.js随手记(5)
以列表方式呈现数据 处理以数组形式储存的多条数据,要先认识foreach.在ViewModel定义一个JavaScript Array或是ko.observableArray() (observab ...
- Knockout.js随手记(4)
动态绑定下拉列表 在<select> data-bind的options选项如果绑定到ko.observableArray(),就可以动态新增选项效果,也就是可以利用其完成常见的级联效果的 ...
- Knockout.js随手记(3)
下拉菜单 <select>也是网页设计重要的一环,knockout.js(以下简称KO)也有不错的支持.针对<select>,在data-bind除了用value可对应下拉菜单 ...
- Knockout.js随手记(1)
新的开始,knockout.js 1.首先去http://knockoutjs.com/index.html下载knockout.js,最新的版本是2.3 2.知道什么是Knockout?它是个Jav ...
- 【Knockout.js 学习体验之旅】（3）模板绑定
本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】（2）花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
随机推荐
- Spring Boot中的事务管理
原文 http://blog.didispace.com/springboottransactional/ 什么是事务? 我们在开发企业应用时,对于业务人员的一个操作实际是对数据读写的多步操作的结合 ...
- Struts2--属性设置方式
Struts2自动获取/设置数据的方式一共分为两种 属性驱动(FieldDriven) 模型驱动(ModelDriven) 属性驱动 属性又分为两种: |- 基本数据类型 |- JavaBean属性类 ...
- Spring Data JPA 学习记录1 -- 单向1:N关联的一些问题
开新坑 开新坑了(笑)....公司项目使用的是Spring Data JPA做持久化框架....学习了一段时间以后发现了一点值得注意的小问题.....与大家分享 主要是针对1:N单向关联产生的一系列问 ...
- mysql5.x升级到mysql5.7后导入之前数据库date出错的快速解决方法【mysql低版本数据导入到高版本出错的解决方法】
mysql5.x升级至mysql5.7后导入之前数据库date出错,这是由于MySQL的sql_mode的影响,解决方法如下所示: [具体参考:mysql的sql_mode详解]修改mysql5.7的 ...
- Dom4J解析技术
前面的话 本文主要讲解有关Dom4j技术和xpath配合下的优化! 目录: 为什么需要Dom4J DOM4J怎么用 xpath怎么配合DOM4J 一 为什么需要Dom4J 一 ...
- Java界面设计 Swing(1)
Java界面设计的用途 开发者可以通过Java SE开发丰富并且强大的具有图形界面的桌面应用程序.也可以设计一些提高效率的工具软件,帮助自己处理机械性工作. Java 的图形界面工具包,可以用于工具类 ...
- nodeJS爬虫---慕课网
源代码一(爬取html源码) //引入http模块var http = require('http');//引入url地址var url = 'http://www.imooc.com/learn/2 ...
- GOPATH 使用总结
GOPATH 环境变量用于指定这样一些目录:除 $GOROOT 之外的包含 Go 项目源代码和二进制文件的目录.go install 和 go 工具会用到 GOPATH:作为编译后二进制的存放目的地 ...
- synchronized使用说明
好久没有更新博客了,今天试着用简单的语言把synchronized的使用说清楚. synchronized是什么? synchronized是用来保证在多线程环境下代码同步执行的可重入的互斥锁.所谓互 ...
- mysql 日期查询 总结
1,对一天24小时内每小时的数据量求和: SELECT IFNULL(SUM(CASE HOUR(时间字段) WHEN 0 THEN 1 ELSE 0 END),0)as '0', IFNULL(SU ...