學習KnockOut第一篇之Hello World
筆者剛開始學習KnockOut。寫的內容就相當於一個學習筆記。且在此處向官網致敬，比較喜歡他們家的Live Example版塊，里面有jsFiddle。至於文檔，輔導章節，也是有的。附上地址：KnockOut。感興趣的話可以看一下的。
那么，開始。
先寫一個連Hello World級別都算不上的。看了文檔，貌似很簡單的樣子。
第一步引進ko的js腳本。第二步創建一個ViewModel。第三步創建一個簡單的View，用data-bind綁定。
一個非常簡單的text綁定。
第一次寫KO
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <!--下面這行代碼就是一個簡單的view了--> 8 <p>My English Name is <span data-bind="text:name"></span></p> 9 </body> 10 </html> 11 <script src="knockout-2.3.0.js"></script> 12 <!--下面這四行代碼就是ViewModel了，一個JavaScript 的Object.--> 13 <script type="text/javascript"> 14 var myViewModel = { 15 name: "Ando" 16 }; 17 </script>
看下運行結果：
什么，沒報錯，但是綁定的數據又沒有顯示出來。再看一下文檔先。原來是少一行代碼。
不能少了它：myViewModel = ko.applyBindings(myViewModel)。得有了它，data-bind屬性才有用，才能被瀏覽器識別，它的作用可以理解為是對KnockOut做一個激活的作用。有了這行代碼后面的text后的name才會有智能提示。所以聰明的做法是
寫了VM,再寫它，最后寫V，寫V時就會有智能提示了。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <!--下面這行代碼就是一個簡單的view了--> 8 <p>My English Name is <span data-bind="text:name"></span></p> 9 </body> 10 </html> 11 <script src="knockout-2.3.0.js"></script> 12 <!--下面這四行代碼就是ViewModel了，一個JavaScript 的Object.--> 13 <script type="text/javascript"> 14 var myViewModel = { 15 name: "Ando" 16 }; 17 // 沒有這行代碼也就做不到綁定了。 18 myViewModel = ko.applyBindings(myViewModel); 19 </script>
再總應該綁定成功了吧：
是的，成功了。激活KO的代碼可不能忘了。
樓主欺負我讀書少，沒文化，只寫一個簡單的聲明式綁定，不是說KO能做到自動的刷新UI什么的，那個寫出來才有點意思好不？
恩，沒欺負你。只是樓主初涉KO,所以寫的比較初級。你說的那個應該是模型狀態改變就自動刷新頁面的那個功能吧。這個我正好學到了。那么就寫一個KO自動刷新頁面的一個Hello World吧。
你且看一下下面的這代碼。
Hello World
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="knockout-2.3.0.js"></script> 6 </head> 7 <body> 8 <p>First:<input data-bind="value:firstWord" /></p> 9 <p>Second:<input data-bind="value:secondWord"/></p> 10 <p><span data-bind="text:AllWord"></span></p> 11 </body> 12 <script type="text/javascript"> 13 var ViewModel = function(first,second) { 14 this.firstWord = ko.observable(first); 15 this.secondWord = ko.observable(second); 16 this.AllWord = ko.computed(function () { 17 //注意這下面的兩個“()”是不能掉的。 18 return this.firstWord() + " " + this.secondWord(); 19 },this); 20 }; 21 ko.applyBindings(new ViewModel("Hi", "Ando")); 22 </script> 23 </html>
樓主，代碼我是沒看懂，是不是又被你欺負沒文化了，因為始終沒有看到哪有Hello World。
代碼看懂了Hello World就可以有的。解釋下代碼先。
ko.observable，是一個相當，非常，很基礎的一個概念，它能做到的就是監控值的變化並且回應它的相應變化。
ko.computed,它就是計算監控屬性的值（E文較弱，自己單純這樣理解）。比如上面就是將第一個監控的詞和第二個監控的詞拼起來。那么，我們看看會不會有"Hi Ando"在最后給我們顯示出來。
果然是有的呢。不過，樓主，還是不見Hello World.
上面說了ko.computed可以計算出被監控值的變化（這里是將兩個被監控的值拼起來），那么，在不改代碼的情況下，如果將頁面上的第一個值改成Hello，把第二個值改成World,會不會下面給我們顯示"Hello World"呢？
我們試試。果斷成功。因為：
學習KO的第一篇學習筆記就到這里了。盡管學習的內容比較淺顯且寫博客比較要時間，但是依舊在進步，不是么？也希望我能繼續的將KO學習下去，博客繼續的寫下去，如果能遇上一些能一起學習KO的園友，那也是極好的。
我現在聽着水墨丹青鳳凰城，坐在椅上，想到懋平的一句話：好似一個君王！