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. git查看本地和创建分支、上传分支、提交代码到分支、删除分支等，git分支、git查看本地和创建分支以及上传分支到服务器

    以下是git命令行里边的命令操作 ##进入项目目录下 giscafer@Faronsince2016 /G/002_project $ cd Comments ##查看远程分支有哪些 giscafer ...

  3. 注解spring

    ================================================ 没有bean的话 也可以放到参数前面

  4. XML文件(2)--使用DOM4J示例

    其他依赖字段/方法 private List<Book> bookList = new LinkedList<Book>(); public List<Book> ...

  5. mfc+vtk

    MFC中view类主要处理显示视图,doc类处理文档,mainframe主要为整个窗口的和工程的设置管理.由此,VTK与MFC联合编程时,需要主要的是数据操作,以及显示要很好的与MFC中的结构结合,做 ...

  6. Java程序员笔试、面试题目

    1. 面向对象编程的三大特性是什么,请简要阐述 2. String 和StringBuffer的区别 3. 说出ArrayList,Vector, LinkedList的存储性能和特性 4. Coll ...

  7. [Machine Learning] Active Learning

    1. 写在前面 在机器学习(Machine learning)领域,监督学习(Supervised learning).非监督学习(Unsupervised learning)以及半监督学习(Semi ...

  8. MySQL主从复制

    Mysql主从复制介绍 MySQL支持单向.双向.链式级联.实时.异步复制.在复制过程中,一台服务器充当服务器(Master),而一个或多个其它的服务器充当从服务器(Slave). 复制可以是单向:M ...

  9. 3. Longest Substring Without Repeating Characters(c++) 15ms

    Given a string, find the length of the longest substring without repeating characters. Examples: Giv ...

  10. SDN/NFV运营商商业化部署

    三大运营商发布未来网络架构,并逐步加快SDN/NFV商业化部署的步伐.中国联通发布其新一代网络架构<CUBE-Net 2.0白皮书>,并与20多家合作伙伴共同启动了“新一代网络”合作研发计 ...