学习KnockOut第二篇之Counter
       先说好了，只是学习笔记。

第一步。先写一个简单的text绑定吧。先写VM，再写激活代码，最后写V,那样V才会有智能提示。此处不多讲，上文中有写到过。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title >Ando's  Counter </title>

 </head>

 <body>

     <div >You've clicked <span data-bind="text:numberOfClick"></span >&nbsp;times</div >

 </body>

 </html>

 <script src="knockout-2.3.0.js"></ script>

 <script type="text/javascript">

     var CounterViewModel = function() {

         this.numberOfClick = ko.observable();

     };

     ko.applyBindings(new CounterViewModel());

 </script>

text绑定

效果将会是这样：

 
 
 
 
 
       第二步。再加一个按钮。每点一次，显示的次数就加一次。那么，就得用到click绑定了。也就是在被点击的时候执行我们定义的JavaScript函数。
 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title >Ando's  Counter </title>

 </head>

 <body>

     <div >You've clicked <span data-bind="text:numberOfClick"></span >&nbsp;times</div >

     <button data-bind ="click:registerClick">Can U click me?</ button>

 </body>

 </html>

 <script src="knockout-2.3.0.js"></ script>

 <script type="text/javascript">

     var CounterViewModel = function() {

         this.numberOfClick = ko.observable();

         //this.registerClick = this.numberOfClick(this.numberOfClick() + 1);

         this.registerClick = function() {

             return this.numberOfClick( this.numberOfClick() + );

         };

     };

     ko.applyBindings(new CounterViewModel());

 </script>

点击一次按钮数字就增加一次可好。click绑定。

我点击六次按钮后将会是这样：

 
 
 
 
 
      第三步。那么，现在，有新需求了。当我们点击了五次之后就不再让用户点击，也就是让此按钮变得不能点击。那么就得用到disable绑定了。其用法也很简单，disable绑定，只有其参数值为true的时候才会disable。需要说一个的就是布尔值false,数字0，null,undefined都是假值（即false,不生效）。与disable相对应的就是enable，用法一样，实际效果正好相反。另外他因为得计算两个监控属性的值，那么还得用到computed.
 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title >Ando's  Counter </title>

 </head>

 <body>

     <div >You've clicked <span data-bind="text:numberOfClick"></span >&nbsp;times</div >

     <button data-bind ="click:registerClick,disable:tooManyClicks"> Can U click me?</button>

 </body>

 </html>

 <script src="knockout-2.3.0.js"></ script>

 <script type="text/javascript">

     var CounterViewModel = function() {

         this.numberOfClick = ko.observable();

         this.registerClick = function() {

             return this.numberOfClick( this.numberOfClick() + );

         };

         this.tooManyClicks = ko.computed( function () {

             return this.numberOfClick() >= ;

         }, this);

     };

     ko.applyBindings(new CounterViewModel());

 </script>

让按钮不能用吧。disable绑定。

看一下效果图，按钮里面字体颜色暗得不是很明显，不过真是的不能点击了，当点击次数有5次后：

 
 
 
 
 
       既然，不让用按钮了，那么总得跟用户说一个原因吧。并且楼主你都说，按钮不能点的“暗示”不是很明显的。能不能当点击那么多次数之后，让按钮不可用，且给用户相应的信息呢。自然可以。那么我们得用到visible绑定了。加个DIV，在DIV里写点提示信息，将这个DIV绑定一下吧。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title >Ando's  Counter </title>

 </head>

 <body>

     <div >You've clicked <span data-bind="text:numberOfClick"></span >&nbsp;times</div >

     <button data-bind ="click:registerClick,disable:tooManyClicks"> Can U click me?</button>

     <div data-bind ="visible:tooManyClicks">

         I think you are tired,U can have a seat now.

     </div >

 </body>

 </html>

 <script src="knockout-2.3.0.js"></ script>

 <script type="text/javascript">

     var CounterViewModel = function() {

         this.numberOfClick = ko.observable();

         this.registerClick = function() {

             return this.numberOfClick( this.numberOfClick() + );

         };

         this.tooManyClicks = ko.computed( function () {

             return this.numberOfClick() >= ;

         }, this);

         };

     ko.applyBindings(new CounterViewModel());

 </script>

来点友情提示。visible绑定。

那么当点击5次后友情提示友好的出现了：

  
 
 
 
 
     
      好的呢。现在是明显的不能点击了。到这里就结束了么，你能不能给个按钮让用户重置一下呢。如果用户想重新点击的话。自然可以，依旧如是。依旧是点击事件，click绑定，只是这次是当点击此按钮时就将此上面的值变为0就好了。
 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title >Ando's  Counter </title>

 </head>

 <body>

     <div >You've clicked <span data-bind="text:numberOfClick"></span >&nbsp;times</div >

     <button data-bind ="click:registerClick,disable:tooManyClicks"> Can U click me?</button>

     <div data-bind ="visible:tooManyClicks">

         I think you are tired,U can have a seat now.

         <button data-bind="click:resetClick"> Reset</ button>

     </div >

 </body>

 </html>

 <script src="knockout-2.3.0.js"></ script>

 <script type="text/javascript">

     var CounterViewModel = function () {

         this.numberOfClick = ko.observable();

         this.registerClick = function () {

             return this.numberOfClick( this.numberOfClick() + );

         };

         this.tooManyClicks = ko.computed( function () {

             return this.numberOfClick() >= ;

         }, this);

         this.resetClick = function() {

             return this.numberOfClick();

         };

     };

     ko.applyBindings(new CounterViewModel());

 </script>

重置按钮，再现一次click绑定

此处不太好给图，当点击Reset的时候它真的就回到第一个图那里去了，不信你可以试试，此处无图亦有真相。

 
 
 
 
 
      楼主，你这个明明就是看官网的例子，然后做了一点自己的分解，你也好意思挂到博客园上来。

      是的呢，楼主初涉，只有在官网上学习下了。做点分解，记下笔记，加深印象，让你见笑了。
      见笑且不说，那么，现在我就有一个需求，看你能不能做出来。
      你且说先。
      就是刚才你也说了，那个不能点击的按钮不能点的不是很明显，尽管后面有了友情提示和重置按钮。你能不能当点击到一定次数后就让按钮上的字也改变一下呢。
      比如就写上“我不能被点到了”或者“你不能点击我了”，诸如此类的字呢，这样么？
      正是此意。
      那容我试试。
      楼主想了会，我们可以用span标签将此按钮里的字体data-bind一下，给之一个初始值，在初始化ViewModel的时候。在计算监控属性的时候，做一个判断，如果监控numberOfClick()的值大于等于5则返回一个你想改变的值就好了。当然不要忘了，当点击重置按钮时，也要重写一个按钮里字的值。
 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title >Ando's  Counter </title>

 </head>

 <body>

     <div >You've clicked <span data-bind="text:numberOfClick"></span >&nbsp;times</div >

     <button data-bind ="click:registerClick,disable:tooManyClicks">< span data-bind="text:buttonText"></span ></button>

     <div data-bind ="visible:tooManyClicks">

         I think you are tired,U can have a seat now.

         <button data-bind="click:resetClick"> Reset</ button>

     </div >

 </body>

 </html>

 <script src="knockout-2.3.0.js"></ script>

 <script type="text/javascript">

     var CounterViewModel = function () {

         this.numberOfClick = ko.observable();

         this.buttonText = ko.observable( "Can U click me?");

         this.registerClick = function () {

             return this.numberOfClick( this.numberOfClick() + );

         };

         this.tooManyClicks = ko.computed( function () {

             this.numberOfClick() >= ;

             if ( this.numberOfClick() >= ) {

                 return this.buttonText( "U can not click me now");

             }

         }, this);

         this.resetClick = function() {

             this.numberOfClick();

             this.buttonText( "Can U click me?");

         };

     };

     ko.applyBindings(new CounterViewModel());

 </script>

按钮里的字也请楼主动态绑定。

附图一张：

 
 
     
 
       第二篇学习笔记到此结束。 欢迎斧正。
 
 
 
 

学习KnockOut第二篇之Counter的更多相关文章

  1. 学习KnockOut第一篇之Hello World

    学习KnockOut第一篇之Hello World 笔者刚开始学习KnockOut.写的内容就相当于一个学习笔记.且在此处向官网致敬,比较喜欢他们家的Live Example版块,里面有jsFiddl ...

  2. RabbitMQ学习总结 第二篇：快速入门HelloWorld

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  3. JavaWeb学习总结第二篇--第一个JavaWeb程序

    JavaWeb学习总结第二篇—第一个JavaWeb程序 最近我在学院工作室学习并加入到研究生的项目中,在学长学姐的带领下,进入项目实践中,为该项目实现一个框架(用已有框架进行改写).于是我在这里记录下 ...

  4. 老老实实学习WCF[第二篇] 配置wcf

    老老实实学WCF 第二篇 配置WCF 在上一篇中,我们在一个控制台应用程序中编写了一个简单的WCF服务并承载了它.先回顾一下服务端的代码: using System; using System.Col ...

  5. 跟初学者学习IbatisNet第二篇

    在上一篇里面我们知道了什么是IbatisNet,并且知道了如何用IbatisNet进行简单的增删改查的操作,在这一篇文章里面我们主要介绍一下IbatisNet操作存储过程. 我们一般把存储过程分为两种 ...

  6. Egret入门学习日记 --- 第二篇 （书籍的选择 && 书籍目录 && 书中 3.3 节 内容）

    第二篇 (书籍的选择 && 书籍目录 && 书中 3.3 节 内容) 既然选好了Egret,那我就要想想怎么学了. 开始第一步,先加个Q群先,这不,拿到了一本<E ...

  7. Python学习【第二篇】Python入门

    Python入门 Hello World程序 在linux下创建一个叫hello.py,并输入 print("Hello World!") 然后执行命令:python hello. ...

  8. Android学习笔记(第二篇)View中的五大布局

    PS:人不要低估自己的实力,但是也不能高估自己的能力.凡事谦为本... 学习内容: 1.用户界面View中的五大布局... i.首先介绍一下view的概念   view是什么呢?我们已经知道一个Act ...

  9. python学习【第二篇】初识python

    python的安装 windows 1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装路径:C:\python27 3.配置环境变量 [右键计算机] ...

随机推荐

  1. .net导出Word的一种方法

    由于ActiveX控件只支持IE(好像FF可以通过安装插件支持),所以js导出word的方式就比较局限 可是如果当页面经过js修改以后,.net是无法获取到的,所以要通过js获取到最新的html并传给 ...

  2. C#常用的字符串操作, 包括截取

    1.取字符串的前i个字符 (1)string str1=str.Substring(0,i); (2)string str1=str.Remove(i,str.Length-i); 2.去掉字符串的前 ...

  3. 如何防止Android应用代码被窃

    上一篇我们讲了apk防止反编译技术中的加壳技术,如果有不明白的可以查看我的上一篇博客http://my.oschina.net/u/2323218/blog/393372.接下来我们将介绍另一种防止a ...

  4. Photoshop CS6的安装

    Photoshop CS6的安装 文件的现在可以从百度软件中下载 安装方法见参考链接,window版的与之类似,亲测成功 参考链接 Mac版Adobe Photoshop CS6 破解过程 Adobe ...

  5. 移动Web轮播图IOS卡顿的问题

    晚饭前,被测试吐槽说,banner轮播手动左右滑的时候会卡顿.我一看不科学啊,大水果手机怎么会卡顿.我一看测试手中拿的是iPod,我觉得大概是这小玩意性能不强悍,后来又拿来5S,依然会卡顿,有趣的是, ...

  6. 什么是GPX

    GPX(GPS eXchange Format, GPS交换格式)是一个XML格式,为应用软件设计的通用GPS数据格式. 它可以用来描述路点.轨迹.路程.这个格式是免费的,可以在不需要付任何许可费用的 ...

  7. call与apply函数

    call与apply函数 1.为什么需要call与apply函数 Javascript中,每一个函数内部都有一个特殊的关键词this,其随着所处环境的不同其指向也是不同的. 函数的内部其this也是指 ...

  8. jQuery 表单验证 jquery.validator.js

    前端开发中经常会碰到表单的制作,其中必备的功能就是提交前的一些简单的验证,非空啊.手机号码啊.E-mail等等等等,这里是一个 jQuery 的表单验证插件,蛮好用的,收录一下. 下面是验证的效果图: ...

  9. arcgis直连oracle

    参数:service :sde:oracle10g(客户端的数据库版本)username:sdepassword:sde@s19(配置的网络连接名) 黄色背景为需要根据实际情况更改的参数内容.如更改为 ...

  10. C++ 重载new和delete操作符

    原因: C++标准库提供的new和delete操作符,是一个通用实现,未针对具体对象做具体分析 存在分配器速度慢.小型对象空间浪费严重等问题,不适用于对效率和内存有限制的应用场景   好处: 灵活的内 ...