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. RabbitMQ修改端口号和心跳时间

    定读者正在Windows系列的操纵体系中装置好了Rabbit MQ后,请找到装置途径下的etc文件夹下,将rabbitmq.config.example备份一份,并点窜为config范例的文件,即为] ...

  2. HTTPS 双向认证构建移动设备安全体系

    HTTPS 双向认证构建移动设备安全体系 对于一些高安全性要求的企业内项目,我们有时希望能够对客户端进行验证.这个时候我们可以使用Https的双向认证机制来实现这个功能. 单向认证:保证server是 ...

  3. 对日期 ，和 master.dbo.spt_values 表操作

    if object_id('tempdb..#xs') is not null drop table #xs; ), date datetime, sale float) insert into #x ...

  4. Safari new Date()

    最近在敲代码的时候不觉得Safari有什么兼容问题,相比较的更多的时候再考虑ie,结果今天就栽在了Safari日期格式化上面了. 正如前面说的没有特别注意Safari的兼容问题所以特地粘贴这个打开Sa ...

  5. beaglebone black 烧写系统后释放空间。

    执行 ./opt/script/toolsgrow_partition.sh就能将2g的空间变为sd卡的大小,我的是8g,执行后就是7.7g

  6. 双向数据绑定（angular,vue）

    最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue. angular众所周知是使用的脏检查($dirty).一开始大家会认为angular开启了类似setInter ...

  7. JavaScript基础(一)之语法、变量、数据类型

    1.JavaScript语法 ①区分大小写 ②弱类型变量 ③每行结尾分号可有可无 ④括号用于代码块 ⑤注释有两种方式(单行和多行注释) 2.JavaScrip变量 ①用Var声明,不要初始化 ②可以在 ...

  8. Tomcat 内存优化设置

    vi /tomcat7.0/bin/catalina.sh 开发环境 #!/bin/sh JAVA_OPTS='-Xms128m -Xmx512m -XX:PermSize=128m' 服务器: #! ...

  9. MySQL 磁盘I/O问题

    一.使用磁盘阵列:RAID,廉价磁盘冗余阵列,可靠性,性能好. 二.使用 Symbolic Links 分布I/O 利用操作系统的符号链接将不同的数据库或表.索引指向不同的物理磁盘,达到分布磁盘I/O ...

  10. touch事件中的touches、targetTouches和changedTouches详解

    touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触 ...