JavaScript的框架這麼多，
依什麼選擇此框架？
要用JavaScript做什麼，
這是首先要問自己的問題。
JavaScript 算是在 MVC 裡的 view 處理部份，
而有一些JS的框架是 MVC 的模式，
但覺得只主要的資料都已被後端給處理過了，
前端的JS不要那麼複雜，
主要做為頁面和使用者的互動。

如果特意要用MVC的JS，
大概會採用 ember.js，
是因為有 Yehuda Katz 加持的關係吧…
Amber.js (formerly SproutCore 2.0) is now Ember.js
但心力時間有限，
而採用較單純的 knockout.js。
之前 wordsmith 以這篇文 {'JS-Objects':2} Knockout.js入門(1)，
介紹了基本的使用，
是個好的認識的開始。
瀏覽網路上有關KO的文章，
覺得好像蠻多是屬於MS陣營的，
但其實也沒關係，工具好用夠用，
不用太在意其色彩。

想要用JS在網頁上最大的原因是，
所有的MVC都是在後端做出來，
最後吐出個完整的html的網頁，
每次要新增修改刪除，
又是整個頁面回來，
就覺得只要傳有變動的項目就好，
沒必要大量資料重覆地在網路間傳送。
其實這就是ajax的功能之一。

另個原因是，不見得所有事都一定要server端做，
那就把html的畫出，交給使用者端的瀏覽器來畫出，
這也可能減少網路的傳輸量，
又分擔了些畫出html的工作到瀏覽器。

例如像最常見的一堆資料的列表用HTML完整地畫是：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

而透過KO是這樣子的程式碼傳給瀏覽器執行：

<ul data-bind="foreach:nums">
  <li><span data-bind="$data"></span></li>
</ul>
<script src="/js/knockout.js" type="text/javascript"></script>
<script type="text/javascript">
  function viewModel() {
    var self = this;
    self.nums = ko.observableArray([1,2,3,4,5]);
  }

  ko.applayBindings(new viewModel());
</script>

看起來好像要寫的字比較多，比較複雜，
是因為只是以單一數字序列為例子，
若要做出每個元素可被刪除的按鍵，
碼又會多了一堆，
而用KO，只要多寫三行就完成了：

<ul data-bind="foreach:nums">
  <li><span data-bind="$data"></span><button data-bind="click:$parent.delNum">刪</button></li>
</ul>
<script src="/js/knockout.js" type="text/javascript"></script>
<script type="text/javascript">
  function viewModel() {
    var self = this;
    self.nums = ko.observableArray([1,2,3,4,5]);
    self.delNum = function(num){
      self.nums().remove(num)
    }
  }

  ko.applayBindings(new viewModel());
</script>

就只是改第2行，及多寫了第9,10行，
頁面的基本互動就搞定，
而要同時偵測計算陣列的數量，
也只要用 nums().length 就算出來，
在頁面裡的綁定，利用

<span data-bind="text:nums().length"></span>

就寫出了即時更動該陣列元素的變化。
要新增元素到陣列裡，也相當容易，
將這個例子貼在：
http://jsfiddle.net/twtw/EkQYx/

如果要說缺點是什麼，
那就是 data-bind 的相關程式碼，
是嵌在 HTML 碼裡面，
對於HTML與JS一定要分開的要求而言，
這是個無法避免的缺點。

系列文章列表