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)的更多相关文章

  1. Knockout.js随手记(2)

    计算属性 konckout.js的API文档,写的极为详细和生动,透过MVVM的运作原理,开发时只需专注于定义ViewModel逻辑,不需耗费心力处理TextBox.Select的onchange.o ...

  2. Knockout.js随手记(7)

    数组元素的新增/移除事件 前两篇博客已经很清楚的知道knockout.js通过observableArray()数组元素增减,可以实时的反映在UI上.当然我们想在数组增加或移除元素时加上自定义逻辑就好 ...

  3. Knockout.js随手记(6)

    实时反映对象属性的变化 在前一篇博客中我们使用了如下代码去新增user对象,即push方法: $("#btnAddUser").click(function () { vm.use ...

  4. Knockout.js随手记(5)

    以列表方式呈现数据  处理以数组形式储存的多条数据,要先认识foreach.在ViewModel定义一个JavaScript Array或是ko.observableArray() (observab ...

  5. Knockout.js随手记(4)

    动态绑定下拉列表 在<select> data-bind的options选项如果绑定到ko.observableArray(),就可以动态新增选项效果,也就是可以利用其完成常见的级联效果的 ...

  6. Knockout.js随手记(3)

    下拉菜单 <select>也是网页设计重要的一环,knockout.js(以下简称KO)也有不错的支持.针对<select>,在data-bind除了用value可对应下拉菜单 ...

  7. Knockout.js随手记(1)

    新的开始,knockout.js 1.首先去http://knockoutjs.com/index.html下载knockout.js,最新的版本是2.3 2.知道什么是Knockout?它是个Jav ...

  8. 【Knockout.js 学习体验之旅】(3)模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  9. 【Knockout.js 学习体验之旅】(2)花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

随机推荐

  1. [asp.net core] Tag Helpers 简介(转)

    原文地址 https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro What are Tag Helpers? ...

  2. jquery select操作大全

    添加option $("#ID option").each(function(){ if($(this).val() == 111){ $(this).remove(); } }) ...

  3. 多个文件下载打包生成zip格式下载

    这个多个文件下载生成zip格式必须先引用一个ICSharpCode.SharpZipLib.dll. 代码如下  //将多个文件打包成压缩文件zip格式下载         protected voi ...

  4. web自动化工具-开篇

    web自动化工具-开篇 最近几年,前端技术风一样的速度迭代更新,各种框架工具雨后春笋般涌现,作为一个平凡的开发者,也只能在洪流中沉沉浮浮,微不足道,以前前端叫做切图仔.美工,如今改了称号叫前端工程师, ...

  5. discuz首页设置默认地址不带forum.php后缀的方法

    最近在研究discuz,上传安装几部搞定,打开首页跳到含有"/forum.php"的网址,到管理中心改了好一会儿也没好.那么如何实现discuz首页设置不带forum.php后缀呢 ...

  6. 在centos 7.0上利用yum一键安装mono

    首先我们需要先配置一下yum源中mono的引用说明: 第一步: vi /etc/yum.repos.d/mono.repo 第二步:在刚打开的文件中编辑如下内容 [mono]name=monobase ...

  7. spring 参数绑定

    部分资料来源: @RequestParam @RequestBody @PathVariable 等参数绑定注解详解 spring学习之@ModelAttribute运用详解 Spring MVC @ ...

  8. CAIN怎么嗅探路由密码

    Cain & Abel 是由Oxid.it开发的一个针对Microsoft操作系统的免费口令恢复工具.号称穷人使用的L0phtcrack.它的功能十分强大,可以网络嗅探,网络欺骗,破解加密口令 ...

  9. paxos(chubby) vs zab(Zookeeper)

    参考: Zookeeper的一致性协议:Zab Chubby&Zookeeper原理及在分布式环境中的应用 Paxos vs. Viewstamped Replication vs. Zab ...

  10. erlang 故障排查工具

    系统级别perf top, dstat -tam, vtune 都能很好分析beam 瓶颈,本文主要erlang 级别排查: 1. 反编译 确认线上运行代码是否正确,reltools没掌握好,升级偶尔 ...