流流流流 @JSDC 2013 ROCK WITH KNOCKOUT.JS
流浪小風 @JSDC 2013
ROCK WITH KNOCKOUT.JS
WHO AM I?
• 流浪小風 (Facebook 陳小風)
• 91mai 就要買 行動商城• C#, Asp.net, Javascript, TypeScript - http://
www.dotblogs.com.tw/kirkchen
• Continuous Integration, BDD
• 使用 Jenkins 打造 .Net CI Server - http://goo.gl/D1lkK
那些年,我們寫過的 CODE…
開發系統常見的需求
• 日期選擇器• 格式化數字 • 選擇顏色
• More…
動手開發
需求異動來了…• 我想要增加兩個日期欄位 , 兩個價格欄位 • 我想要改版型• 我想要打十個批次輸入• 我想要…
改變的時刻…
我們需要 KNOCKOUT….
MVVM PATTERN
View ViewModel
JSON
WebService
Value Changed
Event Triggerd
Data Updated
HTML 和 JAVASCRIPT 分離
ViewModel
View
DEMO• Binding View And ViewModel
• Knockout.js Documention http://knockoutjs.com/documentation/introduction.html
WHY KNOCKOUT.JS• Html 和 JavaScript 分離,透過 Binding 繫結• 設計人員和開發人員可同時進行• 獨立 , 可與其他函示庫相容• 程式碼易於測試• 客製化屬於自己的 Binding
神奇的 KNOCKOUT.JS
TWO WAY DATABINDING• Assign ko.observable()
• 一處變動 , 連動所有相同的地方
DEMO• Input form and preview by observable
COMPUTED FIELD• 自動偵測相關欄位的變動 , 及時產生新值• 適合用於特殊顯示格式 , 組合字串…等等• 黑暗執行緒 – 使用 ko.computed 實現資料檢核
http://webcache.googleusercontent.com/search?q=cache:http://blog.darkthread.net/post-2012-09-27-kolab17.aspx
DEMO• ko.computed
CUSTOM BINDING• 根據自己的需求進行擴充• 客製化控制項• 重用性高 !
DEMO• Create kendo numeric input binding
TEMPLATE• 產品展示清單• 列表模式及圖示模式• 透過 Template 動態切換樣
板
DEMO• Use template dynamic change layout
結論• 關注點分離 (Separation of concerns) 的精神• 發揮你的想像力• 沒有最好的 Framework ,只有最適合你的 Framework
USEFUL KNOCKOUT PLUGINS• Knockout Mapping
http://knockoutjs.com/documentation/plugins-mapping.html
• Knockout Validationhttps://github.com/Knockout-Contrib/Knockout-Validation
• Knockout Postboxhttps://github.com/rniemeyer/knockout-postbox/
• Knockout-Kendo.jshttp://rniemeyer.github.io/knockout-kendo/
REFERENCD• Knockout.js - http://knockoutjs.com/
• 黑暗執行緒 Knokcout.js 入門系列 – http://blog.darkthread.net/post-2012-05-09-knockout-js-intro.aspx
• 小朱 ® 的技術隨手寫 - [Architecture] MVP, MVC, MVVM, 傻傻分不清楚 ~http://www.dotblogs.com.tw/regionbbs/archive/2011/09/29/compare.to.mvp.mvc.mvvm.aspx
Thanks you!