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 ...
随机推荐
- ThinkphpCMF笔记
1.模板js,css文件__PUBLIC__ <link href="__TMPL__Public/style.css" rel="stylesheet" ...
- juery学习总结——例子
1.select元素在选择是找到选择的值和option中的值 <!DOCTYPE html> <html> <head lang="en"> & ...
- Eclipse集成Tomcat：6个常见的”how to”问题
学习一门新技术通常是一个很困难的过程,当你想要同时学习两门有交叉的新技术的时候,这个过程会变得更困难.Tomcat和Eclipse是Java EE开发中最流行的2个必备神器,因此,为了成为一个专业的开 ...
- Android Studio使用Git版本控制工具
1.File->Settings->Version Control->git 将git.exe地址copy进去 2.File->Settings->Version Con ...
- Quick Cocos （2.2.5plus）CoinFlip解析（MenuScene display AdBar二次封装）
转载自:http://cn.cocos2d-x.org/tutorial/show?id=1621 从Samples中找到CoinFlip文件夹,复制其中的 res 和 script 文件夹覆盖新建工 ...
- [Effective Sublime Text] (01) Sublime Text 3 开发环境初始化
选择portable版本 安装git-credential-winstore.exe git config --global credential.helper cache // git config ...
- asp.net mvc使用log4gNetz
1. 下载安装log4gNet 2. 将 \bin\net\4.0\release\log4net.dll 复制到你的项目中 . 3. 将log4net.dll 添加引用到你的项目中. 4. 添加如下 ...
- javascript 心得
1.&&和||等逻辑判断运算标记可以当成条件运算来使用例如: var a = b = c = "12"; (a=="13"&& ...
- input事件与change事件
输入框的change事件: 必须等到输入框失去焦点的时候才会触发,鼠标在空白的地方点一下: 输入框的input事件: 在输入内容变化的同时,实时的触发,不需要等到失去焦点.
- 多个.ui共用一个.qrc出错
在一个已经组建完成的qt项目中,如果再加入新的界面文件,界面文件是无法直接使用原工程的.qrc文件的(执行添加资源操作时不显示资源文件),必须重启一次Qt. 版本: Qt 5.7.0 Qt Creat ...