Knockout.js 3.0
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的注意事項:
- Computed改為只有值改變時才觸發通知
在2.x時代,ko.computed()觀察的observable變數只要被重新給值(即使新值與原值相同亦然)就會觸發重算,許多開發者反應如此會產生無效運算損耗效能,因此3.0的ko.computed()改為只有在值有改變時才觸發重算。
如果希望維持2.x的行為模式,可透過ko.computed(function() { … }).extend({ notify: 'always' });達成。 - 繫結改為獨立更新
<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()以形成訂閱關係。) - optionsCaption改為HTML編輯輸出
下拉選單的optionsCaption參數(就是使用者尚未選取前所顯示的"請選擇..."字樣)原本未提供HTML編碼功能,易造成顯示錯誤(如: < >等符號)及資料漏洞。3.0起則比照text繫結,會一律加上HTML編碼。
如果原本程式已手動加上HTML編碼,升級後要記得移除。
【新功能】
- ko.observableArray加入arrayChange事件(透過trackArrayChanges Extender掛載)
- 新增未掛入DOM的元素之繫結支援
- 對於由observable所組成陣列(注意: 非observableArray)的處理更完善
- Binding Handler可指定繫結順序(value宣告after: [ 'options', 'foreach' ])
- Binding Handler新增preprocess可加入進置處理邏輯
- Binding Handler新增preprocessNode,在繫結前可對元素節點進行加工
- Dynamic Binding Handler – 攔截ko.getBindingHandler(),可以讀入Binding Key(即data-bind="…"中的文字內容),動態決定(或產生)Binding Handler
- 新增checkValue,讓checked繫結可以使用字串以外的任意型別內容作為勾選選項時的value。
- options change事件: 當options改變且當下已選項目被移除時,將會觸發下拉選單的change事件,連帶更新value、selectedOptions
- Observable View Models: 仍屬實驗性質
[KO系列]
http://www.darkthread.net/kolab/labs/default.aspx?m=post
Comments
Be the first to post a comment