这个例子非常简单，主要演示如何通过属性控制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. xshell输入奇怪，空格间距变大

    https://www.macx.cn/thread-2018939-1-1.html 按一下shift+空格就行了 全角/半角转换的快捷键... dd

  2. 抓包 ------ Wireshark 的使用

    Wireshark的数据包详情窗口,如果是用中括号[]括起来的,表示注释,在数据包中不占字节 发了一个包,很久没有收到应答后,会重发包,在Wireshark抓包工具提示“[TCP Retransmis ...

  3. C++ ------ static_cast，dynamic_cast，reinterpret_cast，const_cast

    C++类型转换分为:隐式类型转换和显式类型转换 第1部分. 隐式类型转换 又称为“标准转换”,包括以下几种情况:1) 算术转换(Arithmetic conversion) : 在混合类型的算术表达式 ...

  4. python使用pwd和grp操作unix用户及用户组

    1.pwd模块 pwd模块提供了一个unix密码数据库即/etc/passwd的操作接口,这个数据库包含本地机器用户帐户信息 常用操作如下: pwd.getpwuid(uid):返回对应uid的示例信 ...

  5. Elasticsearch.Net搜索引擎初使用【客户端安装】

    下载windows客户端 官方文档地址:https://www.elastic.co/guide/en/elasticsearch/client/net-api/6.x/introduction.ht ...

  6. HNOI2004 宠物收养所 （Treap）

    1285 宠物收养所 http://codevs.cn/problem/1285/  时间限制: 1 s  空间限制: 128000 KB     题目描述 Description 最近,阿Q开了一间 ...

  7. Codeforces 221 B. Little Elephant and Numbers

    B. Little Elephant and Numbers time limit per test 2 seconds memory limit per test 256 megabytes inp ...

  8. Python学习笔记（三十五）—内置模块（4）struct

    摘抄自:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001431955007 ...

  9. Anniversary party（树形dp入门）

    Anniversary party Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  10. 【BZOJ】3963: [WF2011]MachineWorks

    [题意]给定n台在时间di可以买入的机器,pi买入,可在任意时间ri卖出,买入和卖出之间的持有时间每天产生gi金钱,任意时间至多持有一台机器.给定初始钱数c和总天数T,求最大收益.n<=10^5 ...