Knockout.js 3.0

Knockout.js在去年10/25釋出3.0版，手上專案總算由焦頭爛額推進到火燒屁股(好像沒有比較好耶 XD )，便開始著手進行一些零散重構，也順便升級第三方程式庫(有個IE11問題要靠KendoUI升級解決)，Knockout.js也想一併升級成3.0。整理Knockout.js 3.0資訊如下:

【Breaking Changes】

俗話說: "先研究不傷身體，再講求效果"。一般升級的首要考量不是有哪些新功能，而是有哪些功能被拿掉，看到酷炫新功能之前網站就先掛點，肯定惹來白眼。

KO RD準備了一份2.x升3.0的注意事項:

1. Computed改為只有值改變時才觸發通知
   在2.x時代，ko.computed()觀察的observable變數只要被重新給值(即使新值與原值相同亦然)就會觸發重算，許多開發者反應如此會產生無效運算損耗效能，因此3.0的ko.computed()改為只有在值有改變時才觸發重算。
   如果希望維持2.x的行為模式，可透過ko.computed(function() { … }).extend({ notify: 'always' });達成。
   
2. 繫結改為獨立更新
   <input type="checkbox" data-bind="visible: showTerms, checked: acceptsTerms" />
   以上範例中有visible及checked兩個繫結，在2.x時代，當acceptsTerms改變會觸發checked狀態更新，也會連帶以showTerms屬性更新visible(即使showTerms完全沒變動)，這在某些自訂繫結情境會導致詭異的Bug。
   3.0已改為各繫結獨立更新，一方面改善效能，一方面也避免前述潛在Bug。除非原本程式有偷用"靠任一繫結連動其他繫結重算"密技，否則這個改變不會造成影響。(呵呵，我就中獎了，單選或多選兩用Checkbox清單需要調整，要讀取allBindingsAccessor().options()以形成訂閱關係。)
   
3. optionsCaption改為HTML編輯輸出
   下拉選單的optionsCaption參數(就是使用者尚未選取前所顯示的"請選擇..."字樣)原本未提供HTML編碼功能，易造成顯示錯誤(如: < >等符號)及資料漏洞。3.0起則比照text繫結，會一律加上HTML編碼。
   如果原本程式已手動加上HTML編碼，升級後要記得移除。

【新功能】

1. ko.observableArray加入arrayChange事件(透過trackArrayChanges Extender掛載)
2. 新增未掛入DOM的元素之繫結支援
3. 對於由observable所組成陣列(注意: 非observableArray)的處理更完善
4. Binding Handler可指定繫結順序(value宣告after: [ 'options', 'foreach' ])
5. Binding Handler新增preprocess可加入進置處理邏輯
6. Binding Handler新增preprocessNode，在繫結前可對元素節點進行加工
7. Dynamic Binding Handler – 攔截ko.getBindingHandler()，可以讀入Binding Key(即data-bind="…"中的文字內容)，動態決定(或產生)Binding Handler
8. 新增checkValue，讓checked繫結可以使用字串以外的任意型別內容作為勾選選項時的value。
9. options change事件: 當options改變且當下已選項目被移除時，將會觸發下拉選單的change事件，連帶更新value、selectedOptions
10. Observable View Models: 仍屬實驗性質

[KO系列]