學習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 > 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>
效果將會是這樣：
第二步。再加一個按鈕。每點一次，顯示的次數就加一次。那么，就得用到
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 > 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>
我點擊六次按鈕后將會是這樣：
第三步。那么，現在，有新需求了。當我們點擊了五次之后就不再讓用戶點擊，也就是讓此按鈕變得不能點擊。那么就得用到
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 > 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>
看一下效果圖，按鈕里面字體顏色暗得不是很明顯，不過真是的不能點擊了，當點擊次數有5次后：
既然，不讓用按鈕了，那么總得跟用戶說一個原因吧。並且樓主你都說，按鈕不能點的“暗示”不是很明顯的。能不能當點擊那么多次數之后，讓按鈕不可用，且給用戶相應的信息呢。自然可以。那么我們得用到
visible綁定了。加個DIV，在DIV里寫點提示信息，將這個DIV綁定一下吧。
來點友情提示。visible綁定。
重置按鈕，再現一次click綁定
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 > 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>
那么當點擊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 > 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>
此處不太好給圖，當點擊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 > 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>
附圖一張：
第二篇學習筆記到此結束。 歡迎斧正。