visible, disable, css绑定

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

运行效果

备注：

    本文版权归大家共用，不归本人所有，所有知识都来自于官网支持，书本，国内外论坛，大牛分享等等......后续将学习knockout.js的常用功能。

                                如果你喜欢本文的话，推荐共勉，谢谢！

Knockout.js随手记(8)的更多相关文章

  1. Knockout.js随手记(2)

    计算属性 konckout.js的API文档,写的极为详细和生动,透过MVVM的运作原理,开发时只需专注于定义ViewModel逻辑,不需耗费心力处理TextBox.Select的onchange.o ...

  2. Knockout.js随手记(7)

    数组元素的新增/移除事件 前两篇博客已经很清楚的知道knockout.js通过observableArray()数组元素增减,可以实时的反映在UI上.当然我们想在数组增加或移除元素时加上自定义逻辑就好 ...

  3. Knockout.js随手记(6)

    实时反映对象属性的变化 在前一篇博客中我们使用了如下代码去新增user对象,即push方法: $("#btnAddUser").click(function () { vm.use ...

  4. Knockout.js随手记(5)

    以列表方式呈现数据  处理以数组形式储存的多条数据,要先认识foreach.在ViewModel定义一个JavaScript Array或是ko.observableArray() (observab ...

  5. Knockout.js随手记(4)

    动态绑定下拉列表 在<select> data-bind的options选项如果绑定到ko.observableArray(),就可以动态新增选项效果,也就是可以利用其完成常见的级联效果的 ...

  6. Knockout.js随手记(3)

    下拉菜单 <select>也是网页设计重要的一环,knockout.js(以下简称KO)也有不错的支持.针对<select>,在data-bind除了用value可对应下拉菜单 ...

  7. Knockout.js随手记(1)

    新的开始,knockout.js 1.首先去http://knockoutjs.com/index.html下载knockout.js,最新的版本是2.3 2.知道什么是Knockout?它是个Jav ...

  8. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  9. 【Knockout.js 学习体验之旅】（2）花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

随机推荐

  1. php sleep

    实例一:把时间输出十次,但全部有结果了,才在html浏览器页面输出 ;$i<;$i++){ echo time()."<br>"; sleep(); } echo ...

  2. 使用Gitblit 在windows 上部署你的Git Server

    Gitblit: 在windows 上部署你的Git Server 前言 之前在dudu的文章里看到过用bonobogit 部署在 IIS 7.5 上的Window 平台的git 服务器.学着部署使用 ...

  3. free-简单明了解释清楚怎么看内存使用

    free命令可以用来查看系统内存使用情况.我一般习惯-m参数以MB的方式查看 [root@localhost ~]# free -m total used free shared buffers ca ...

  4. 认识Android Service

    一.使用Service 1.什么是Service以及Service的配置项:  Service是Android组件的一种,派生自android.app.service类.它不提供交互界面,只是在后台运 ...

  5. MySQL练习-employees数据库(二)

    department 部门表 dept_emp 部门员工任职期表(按部门&时期) dept_manager 部门经理任职期表(按时期) employees 员工详情表 salaries 员工薪 ...

  6. python基础知识（三）

    摘要:主要涉及新数据类型set集合.三元运算.深浅拷贝.函数基础.全局变量与局部变量 一.set --> 无序,不允许重复的集合 不允许重复的列表,   1,创建    s = set() 接收 ...

  7. href="javascript:;" 作用

    <a href="javascript:;" onclick="doExport(this)" class="easyui-linkbutton ...

  8. python dict clear只能删除一层，不能够递归删除。

    void PyDict_Clear(PyObject *op) { dictobject *mp; dictentry *ep, *table; int table_is_malloced; Py_s ...

  9. using 声明与编译指令

    using std::cout; // using 声明 using namespace std; // using 编译指令,导入std里面的所有名称 一般使用using 声明,它只会导入指定的名称 ...

  10. C语言 独木舟问题

    n个人,已知每个人体重,独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟? 分析:贪心算法,抽象化 ...