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 ...
随机推荐
- Ubuntu提示卷boot仅剩0字节的硬盘空间，解决办法
查看当前安装的linux内核版本号 dpkg --get-selections |grep linux-image 查看当前使用的内核版本号 uname -a 卸载不需要的内核 sudo apt-ge ...
- yii2创建数据表
原文地址: http://blog.csdn.net/xiaoyangxiaodong/article/details/45026865
- mysql二级索引
以InnoDB来说,每个InnoDB表具有一个特殊的索引称为聚集索引.如果您的表上定义有主键,该主键索引是聚集索引.如果你不定义为您的表的主键 时,MySQL取第一个唯一索引(unique)而且只含非 ...
- Echarts 饼图标题文字换行问题
var option = { title : { text: '数据来源', x:'center' }, tooltip : { trigger: 'item', formatter: "{ ...
- git pull和git fetch的区别
Git中从远程的分支获取最新的版本到本地有这样2个命令:1. git fetch:相当于是从远程获取最新版本到本地,不会自动merge Git fetch origin master git log ...
- Python 简易聊天机器人
聊天机器人 | |-----MySql | |---module--"逻辑运算层" | | | |---ciku--"与词库交互" | | | |---dict ...
- es6中的promise对象
Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resol ...
- Sicily 1031: Campus （最短路）
这是一道典型的最短路问题,直接用Dijkstra算法便可求解,主要是需要考虑输入的点是不是在已给出的地图中,具体看代码 #include<bits/stdc++.h> #define MA ...
- 基础知识《十》java 异常捕捉 ( try catch finally ) 你真的掌握了吗？
本文转载自 java 异常捕捉 ( try catch finally ) 你真的掌握了吗? 前言:java 中的异常处理机制你真的理解了吗?掌握了吗?catch 体里遇到 return 是怎么处理 ...
- git: fatal: Not a git repository (or any of the parent directories): .git
在看书 FlaskWeb开发:基于Python的Web应用开发实战 时,下载完源码后 git clone https://github.com/miguelgrinberg/flasky.git 试着 ...