这个例子非常简单，主要演示如何通过属性控制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. Dell 戴尔预装Windows8改成Windows7

    UEFI模式启动: 添加启动方式,正确路径为: 另外: Ubuntu启动gpt由gpt10变为gpt9 dd

  2. python基础7--集合

    集合set Python的set集合是一个无序不重复元素集.基本功能包括关系测试和消除重复元素.集合对象还支持union(并集).intersection(交集).difference(差集) 和 s ...

  3. linux 隐藏权限

    原文 ------通过chattr设置档案的隐藏权限------ [root@sdc ~]#chattr --helpUsage: chattr [-RV] [-+=AacDdijsSu] [-v v ...

  4. 再谈System.arraycopy和Arrays.copyOf

    之前转载过一篇博文,介绍过这两个方法,今天想要再次详细的了解一下. public static native void arraycopy(Object src, int srcPos, Object ...

  5. Python学习笔记（三十二）常用内建模块（1）— datetime

    >>> from datetime import datetime >>> now = datetime.now() # 获取当前datetime >> ...

  6. Configure Always On Availability Group for SQL Server on Ubuntu——Ubuntu上配置SQL Server Always On Availability Group

    下面简单介绍一下如何在Ubuntu上一步一步创建一个SQL Server AG(Always On Availability Group),以及配置过程中遇到的坑的填充方法. 目前在Linux上可以搭 ...

  7. 【BZOJ】3036: 绿豆蛙的归宿

    [题意]给定DAG带边权连通图,保证所有点都能到达终点n,每个点等概率沿边走,求起点1到终点n的期望长度.n<=10^5. [算法]期望DP [题解]f[i]表示到终点n的期望长度. f[n]= ...

  8. $this->success传递数据

    public function index_edit_doExport() { $search=$_POST['id']; $this->success(U('Tongji/index_edit ...

  9. MySql 复制表命令

    1.只复制表结构到新表 CREATE TABLE 新表 SELECT * FROM 旧表 WHERE 1=2; 或 CREATE TABLE 新表 LIKE 旧表 ; 注意上面两种方式,前一种方式是不 ...

  10. 【leetcode 简单】 第七题 合并两个有序链表

    将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4 输出:1->1->2- ...