这个例子非常简单，主要演示如何通过属性控制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>

visible, disable, css绑定的更多相关文章

  1. Knockout.Js官网学习（html绑定、css绑定）

    Html绑定 html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数.如果在你的view model里声明HTML标记并且render的话,那非常有用. 简单示例 <div dat ...

  2. CSS绑定

    css绑定会对元素的CSS类进行操作.在某些情况下这将非常有用,例如:当数值是负的时将其高亮显示. (注:如果如果不想直接更改CSS类,而是只要改其中一个样式,则需要使用style绑定) 示例:使用静 ...

  3. Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的:使用knockout提供的机制实现输入框失去焦点后的校验工作,并使用CSS绑定给未通过校验的输入框添加红色边框突出显示. 步骤: 先在htm中添加.error的css样式, 并在输入框中的dat ...

  4. Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了． 步骤: 先在htm中添加.error的css样 ...

  5. Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母.

    目的: 实践一下Knockout提供的CSS绑定功能和afterkeydown事件． 步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNam ...

  6. Knockout v3.4.0 中文版教程-13-控制文本内容和外观-css绑定

    4. css绑定 目的 css绑定可以给关联的DOM元素添加或移除一个或多个CSS类.该绑定很有用,比如,当一些值为负数时高亮这些值为红色. (注意:如果你不想使用一个CSS类选择器来附加样式而想直接 ...

  7. Knockout.js CSS绑定

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  8. Knockout.js随手记(8)

    visible, disable, css绑定 这个例子非常简单,主要演示如何通过属性控制html元素的显示与否(visible),可用性(disable)以及根据属性添加相应的CSS样式. 先简单的 ...

  9. Knockout与Require框架同时使用时的visible绑定的问题，造成的影响，以及解决的方法。

    Knockout 可以将 visible 绑定到DOM 元素上,使得该元素的hidden 或visible 状态取决于绑定的值. 查看以下knockout的描述,http://knockoutjs.c ...

随机推荐

  1. 前端PHP入门-035-Session的实例

      登陆例子:(请注意一定要自己敲一遍,不要CV大法) 首先上一下成果图,激起同学们写的欲望,登录页如下: 点击登陆之后如下: 说明哦了,么问题.接下来自己实现一下. 首先数据库信息: 新建一个名为 ...

  2. React读取Excel——js-xlsx 插件的使用

    介绍 SheetJS js-xlsx 是一款能够读写多种格式表格的插件,浏览器支持良好,并且能在多个语言平台上使用,目前在 github 上有 12602 个 star, 刚好项目中遇到了前端解析 e ...

  3. Shiro实战教程（二）

    http://www.jianshu.com/p/6786ddf54582/ https://www.cnblogs.com/ealenxie/p/10610741.html

  4. 一个ASP.NET中使用的MessageBox类

    /// <summary> /// 自定义信息对话框 /// </summary> public class MessageBox { /// <summary> ...

  5. 【51nod】1238 最小公倍数之和 V3 杜教筛

    [题意]给定n,求Σi=1~nΣj=1~n lcm(i,j),n<=10^10. [算法]杜教筛 [题解]就因为写了这个非常规写法,我折腾了3天…… $$ans=\sum_{i=1}^{n}\s ...

  6. 基本控件文档-UIView属性---iOS-Apple苹果官方文档翻译

    本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址 //转载请注明出处--本文永久链接:http://www.cnblogs.com/Ch ...

  7. MySql 快速去重方法

    1.复制需要去重的表 CREATE TABLE 新表 LIKE 旧表 ; 2.将需要去重的字段 设置为唯一union 索引 ALTER TABLE 表名 ADD UNIQUE(`字段`); 3.复制旧 ...

  8. 【leetcode 简单】 第五十一题 有效电话号码

    给定一个包含电话号码列表(一行一个电话号码)的文本文件 file.txt,写一个 bash 脚本输出所有有效的电话号码. 你可以假设一个有效的电话号码必须满足以下两种格式: (xxx) xxx-xxx ...

  9. Paramiko使用

    1.下载安装 pycrypto-2.6.1.tar.gz (apt-get install python-dev) 解压,进入,python setup.py build[编译],python set ...

  10. PHP对象4: final 不允许重写方法或不允许继承类

    final用在方法中,能继承方法, 不允许重写方法 final用在类声名中, 此类就不能继承 <?php class A{ final function say(){ say 'Ok<br ...