这个例子非常简单，主要演示如何通过属性控制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. VC++的debug与release版本

    因为在Debug中有ASSERT断言保护,所以要崩溃,而在Release优化中就会删掉ASSERT,所以会出现正常运行. void func() {    char b[2]={0};    strc ...

  2. js返回上一页的实现方法

    下面是常用代码: <a href="<a href="javascript :history.back(-1)">返回上一页</a> < ...

  3. 基于packstack的openstack单节点安装

    一.安装源处理 1.更新base源为网易的源 cd /etc/yum.repos.d/ wget http://mirrors.163.com/.help/CentOS6-Base-163.repo ...

  4. springboot+spring session+redis+nginx实现session共享和负载均衡

    环境 centos7. jdk1.8.nginx.redis.springboot 1.5.8.RELEASE session共享 添加spring session和redis依赖 <depen ...

  5. 接口自动化测试框架HttpRunner

    接口自动化测试框架 https://github.com/HttpRunner/HttpRunner http://debugtalk.com/post/ApiTestEngine-api-test- ...

  6. c++ virtual总结

    virtual-关键字用于修饰成员函数时,有以下特性 1.用于修饰的基类的成员函数,被修饰的基类成员函数-其派生类的同名成员函数也默认带有virtual 关键字2.当virtual 用于修饰析构函数( ...

  7. 【洛谷 P3648】 [APIO2014]序列分割 （斜率优化）

    题目链接 假设有\(3\)段\(a,b,c\) 先切\(ab\)和先切\(bc\)的价值分别为 \(a(b+c)+bc=ab+bc+ac\) \((a+b)c+ab=ab+bc+ac\) 归纳一下可以 ...

  8. 127.0.0.1、localhost、0.0.0.0的区别

    在开发web应用的测试环境中,如果希望同一个局域网的同事通过内网IP访问自己的应用,则需要把web服务监听的ip地址改为0.0.0.0.为什么用127.0.0.1不行,而用0.0.0.0就可以呢? f ...

  9. Axure RP 授权码

    Axure RP 8.1.0.3372Licensee:KoshyKey:wTADPqxn3KChzJxLmUr5jTTitCgsfRkftQQ1yIG9HmK83MYSm7GPxLREGn+Ii6x ...

  10. Android 反编译神器jadx的使用

    一.前言 今天介绍一个非常好用的反编译的工具 jadx .jadx 的功能非常的强大,对我而言,基本上满足日常反编译需求. jadx 优点: 图形化的界面. 拖拽式的操作. 反编译输出 Java 代码 ...