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

    配置源: http://wiki.ubuntu.org.cn/%E6%BA%90%E5%88%97%E8%A1%A8#Trusty.2814.04.29.E7.89.88.E6.9C.AC 清理工作: ...

  2. 题解【CF277E Binary Tree on Plane】

    Description 给你平面上 \(n\) 个点 \((2 \leq n \leq 400)\),要求用这些点组成一个二叉树(每个节点的儿子节点不超过两个),定义每条边的权值为两个点之间的欧几里得 ...

  3. TCP ------ 抓包分析（seq ack）

    总结: 1.ACK包可以和其他包合在一起,比如ACK包可以携带数据 2.可以接收多个数据包后,一次性给一个应答,不用每个数据包一一对应给应答 3.在通信过程中,通过接收到的包的ack值可以判断是否是上 ...

  4. socket--粘包

    参考博客:http://www.cnblogs.com/kex1n/p/6502002.html 一.粘包现象 在上一篇的socket传输大数据文章中,我们可以顺利的接发数据,似乎做的不错,可以接收了 ...

  5. Bootstrap笔记-加强版

    1.bootstrap引入: <!DOCTYPE html><html lang="zh-cn"><head><meta charset= ...

  6. codeforces Good bye 2016 E 线段树维护dp区间合并

    codeforces Good bye 2016 E 线段树维护dp区间合并 题目大意:给你一个字符串,范围为‘0’~'9',定义一个ugly的串,即串中的子串不能有2016,但是一定要有2017,问 ...

  7. GridControl详解（一）原汁原味的表格展示

    Dev控件中的表格控件GridControl控件非常强大.不过,一些细枝末节的地方有时候用起来不好找挺讨厌的.使用过程中,多半借助Demo和英文帮助文档.网上具体的使用方法也多半零碎.偶遇一个简单而且 ...

  8. LintCode 156: Merge Interval

    LintCode 156: Merge Interval 题目描述 给出若干闭合区间,合并所有重叠的部分. 样例 给出的区间列表 => 合并后的区间列表: [ [ [1, 3], [1, 6], ...

  9. 20155117王震宇 2016-2017-2 《Java程序设计》第九周学习总结

    教材学习内容总结 JDBC JDBC API是一个Java API,可以访问任何类型表列数据,特别是存储在关系数据库中的数据.JDBC代表Java数据库连接. JDBC库中所包含的API任务通常与数据 ...

  10. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...