学习KnockOut第二篇之Counter

 

                                                                    学习KnockOut第二篇之Counter
       先说好了,只是学习笔记。
       第一步。先写一个简单的text绑定。先写VM,再写激活代码,最后写V,那样V才会有智能提示。此处不多讲,上文中有写到过。
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title >Ando's  Counter </title>
 5 </head>
 6 <body>
 7     <div >You've clicked <span data-bind="text:numberOfClick"></span >&nbsp;times</div >
 8 </body>
 9 </html>
10 <script src="knockout-2.3.0.js"></ script>
11 <script type="text/javascript">
12     var CounterViewModel = function() {
13         this.numberOfClick = ko.observable(0);
14     };
15     ko.applyBindings(new CounterViewModel());
16 </script>
text绑定

       效果将会是这样:

      

 
 
 
 
 
       第二步。再加一个按钮。每点一次,显示的次数就加一次。那么,就得用到click绑定了。也就是在被点击的时候执行我们定义的JavaScript函数。
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title >Ando's  Counter </title>
 5 </head>
 6 <body>
 7     <div >You've clicked <span data-bind="text:numberOfClick"></span >&nbsp;times</div >
 8     <button data-bind ="click:registerClick">Can U click me?</ button>
 9 </body>
10 </html>
11 <script src="knockout-2.3.0.js"></ script>
12 <script type="text/javascript">
13     var CounterViewModel = function() {
14         this.numberOfClick = ko.observable(0);
15         //this.registerClick = this.numberOfClick(this.numberOfClick() + 1);
16         this.registerClick = function() {
17             return this.numberOfClick( this.numberOfClick() + 1);
18         };
19     };
20     ko.applyBindings(new CounterViewModel());
21 </script>
点击一次按钮数字就增加一次可好。click绑定。

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

       
 
 
 
 
 
      第三步。那么,现在,有新需求了。当我们点击了五次之后就不再让用户点击,也就是让此按钮变得不能点击。那么就得用到disable绑定了。其用法也很简单,disable绑定,只有其参数值为true的时候才会disable。需要说一个的就是布尔值false,数字0,null,undefined都是假值(即false,不生效)。与disable相对应的就是enable,用法一样,实际效果正好相反。另外他因为得计算两个监控属性的值,那么还得用到computed.
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title >Ando's  Counter </title>
 5 </head>
 6 <body>
 7     <div >You've clicked <span data-bind="text:numberOfClick"></span >&nbsp;times</div >
 8     <button data-bind ="click:registerClick,disable:tooManyClicks"> Can U click me?</button>
 9 </body>
10 </html>
11 <script src="knockout-2.3.0.js"></ script>
12 <script type="text/javascript">
13     var CounterViewModel = function() {
14         this.numberOfClick = ko.observable(0);
15         this.registerClick = function() {
16             return this.numberOfClick( this.numberOfClick() + 1);
17         };
18         this.tooManyClicks = ko.computed( function () {
19             return this.numberOfClick() >= 5;
20         }, this);
21     };
22     ko.applyBindings(new CounterViewModel());
23 </script>
让按钮不能用吧。disable绑定。

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

     

 
 
 
 
 
       既然,不让用按钮了,那么总得跟用户说一个原因吧。并且楼主你都说,按钮不能点的“暗示”不是很明显的。能不能当点击那么多次数之后,让按钮不可用,且给用户相应的信息呢。自然可以。那么我们得用到visible绑定了。加个DIV,在DIV里写点提示信息,将这个DIV绑定一下吧。
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title >Ando's  Counter </title>
 5 </head>
 6 <body>
 7     <div >You've clicked <span data-bind="text:numberOfClick"></span >&nbsp;times</div >
 8     <button data-bind ="click:registerClick,disable:tooManyClicks"> Can U click me?</button>
 9     <div data-bind ="visible:tooManyClicks">
10         I think you are tired,U can have a seat now.
11     </div >
12 </body>
13 </html>
14 <script src="knockout-2.3.0.js"></ script>
15 <script type="text/javascript">
16     var CounterViewModel = function() {
17         this.numberOfClick = ko.observable(0);
18         this.registerClick = function() {
19             return this.numberOfClick( this.numberOfClick() + 1);
20         };
21         this.tooManyClicks = ko.computed( function () {
22             return this.numberOfClick() >= 5;
23         }, this);
24         };
25     ko.applyBindings(new CounterViewModel());
26 </script>
来点友情提示。visible绑定。

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

    
  
 
 
 
 
     
      好的呢。现在是明显的不能点击了。到这里就结束了么,你能不能给个按钮让用户重置一下呢。如果用户想重新点击的话。自然可以,依旧如是。依旧是点击事件,click绑定,只是这次是当点击此按钮时就将此上面的值变为0就好了。
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title >Ando's  Counter </title>
 5 </head>
 6 <body>
 7     <div >You've clicked <span data-bind="text:numberOfClick"></span >&nbsp;times</div >
 8     <button data-bind ="click:registerClick,disable:tooManyClicks"> Can U click me?</button>
 9     <div data-bind ="visible:tooManyClicks">
10         I think you are tired,U can have a seat now.
11         <button data-bind="click:resetClick"> Reset</ button>
12     </div >
13 </body>
14 </html>
15 <script src="knockout-2.3.0.js"></ script>
16 <script type="text/javascript">
17     var CounterViewModel = function () {
18         this.numberOfClick = ko.observable(0);
19         this.registerClick = function () {
20             return this.numberOfClick( this.numberOfClick() + 1);
21         };
22         this.tooManyClicks = ko.computed( function () {
23             return this.numberOfClick() >= 5;
24         }, this);
25         this.resetClick = function() {
26             return this.numberOfClick(0);
27         };
28     };
29     ko.applyBindings(new CounterViewModel());
30 </script>
重置按钮,再现一次click绑定

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

 

   

 
 
 
 
 
      楼主,你这个明明就是看官网的例子,然后做了一点自己的分解,你也好意思挂到博客园上来。
      是的呢,楼主初涉,只有在官网上学习下了。做点分解,记下笔记,加深印象,让你见笑了。
      见笑且不说,那么,现在我就有一个需求,看你能不能做出来。
      你且说先。
      就是刚才你也说了,那个不能点击的按钮不能点的不是很明显,尽管后面有了友情提示和重置按钮。你能不能当点击到一定次数后就让按钮上的字也改变一下呢。
      比如就写上“我不能被点到了”或者“你不能点击我了”,诸如此类的字呢,这样么?
      正是此意。
      那容我试试。
      楼主想了会,我们可以用span标签将此按钮里的字体data-bind一下,给之一个初始值,在初始化ViewModel的时候。在计算监控属性的时候,做一个判断,如果监控numberOfClick()的值大于等于5则返回一个你想改变的值就好了。当然不要忘了,当点击重置按钮时,也要重写一个按钮里字的值。
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title >Ando's  Counter </title>
 5 </head>
 6 <body>
 7     <div >You've clicked <span data-bind="text:numberOfClick"></span >&nbsp;times</div >
 8     <button data-bind ="click:registerClick,disable:tooManyClicks">< span data-bind="text:buttonText"></span ></button>
 9     <div data-bind ="visible:tooManyClicks">
10         I think you are tired,U can have a seat now.
11         <button data-bind="click:resetClick"> Reset</ button>
12     </div >
13 </body>
14 </html>
15 <script src="knockout-2.3.0.js"></ script>
16 <script type="text/javascript">
17     var CounterViewModel = function () {
18         this.numberOfClick = ko.observable(0);
19         this.buttonText = ko.observable( "Can U click me?");
20         this.registerClick = function () {
21             return this.numberOfClick( this.numberOfClick() + 1);
22         };
23         this.tooManyClicks = ko.computed( function () {
24             this.numberOfClick() >= 5;
25             if ( this.numberOfClick() >= 5) {
26                 return this.buttonText( "U can not click me now");
27             }
28         }, this);
29         this.resetClick = function() {
30             this.numberOfClick(0);
31             this.buttonText( "Can U click me?");
32         };
33     };
34     ko.applyBindings(new CounterViewModel());
35 </script>
按钮里的字也请楼主动态绑定。

     附图一张:

    


 
 
     
 
       第二篇学习笔记到此结束。 欢迎斧正。
 
 
 
 
posted @ 2014-09-21 13:52  公子若不胖天下谁胖  阅读(1844)  评论(11编辑  收藏  举报