Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
流浪小風@JSDC 2013ROCK WITH KNOCKOUT.JS
WHO AM I?• 流浪小風 (Facebook陳小風)• 91mai 就要買 行動商城• C#, Asp.net, Javascript, TypeScript -http://www.dotblogs.com.tw/kirkchen• C...
那些年,我們寫過的CODE…
開發系統常見的需求• 日期選擇器• 格式化數字• 選擇顏色• More…
動手開發
需求異動來了…• 我想要增加兩個日期欄位, 兩個價格欄位• 我想要改版型• 我想要打十個批次輸入• 我想要…
改變的時刻…
我們需要KNOCKOUT….
MVVM PATTERNView ViewModelJSONWebServiceValue ChangedEvent TriggerdData Updated
HTML和JAVASCRIPT分離ViewModelView
DEMO• Binding View And ViewModel• Knockout.js Documentionhttp://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...
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 Mappinghttp://knockoutjs.com/documentation/plugins-mapping.html• Knockout Validationhttp...
REFERENCD• Knockout.js - http://knockoutjs.com/• 黑暗執行緒 Knokcout.js入門系列 –http://blog.darkthread.net/post-2012-05-09-knockou...
Thanks you!
Upcoming SlideShare
Loading in …5
×

Rock with knockout

1,579 views

Published on

  • Be the first to comment

Rock with knockout

  1. 1. 流浪小風@JSDC 2013ROCK WITH KNOCKOUT.JS
  2. 2. 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
  3. 3. 那些年,我們寫過的CODE…
  4. 4. 開發系統常見的需求• 日期選擇器• 格式化數字• 選擇顏色• More…
  5. 5. 動手開發
  6. 6. 需求異動來了…• 我想要增加兩個日期欄位, 兩個價格欄位• 我想要改版型• 我想要打十個批次輸入• 我想要…
  7. 7. 改變的時刻…
  8. 8. 我們需要KNOCKOUT….
  9. 9. MVVM PATTERNView ViewModelJSONWebServiceValue ChangedEvent TriggerdData Updated
  10. 10. HTML和JAVASCRIPT分離ViewModelView
  11. 11. DEMO• Binding View And ViewModel• Knockout.js Documentionhttp://knockoutjs.com/documentation/introduction.html
  12. 12. WHY KNOCKOUT.JS• Html和JavaScript分離,透過Binding繫結• 設計人員和開發人員可同時進行• 獨立, 可與其他函示庫相容• 程式碼易於測試• 客製化屬於自己的Binding
  13. 13. 神奇的KNOCKOUT.JS
  14. 14. TWO WAY DATABINDING• Assign ko.observable()• 一處變動, 連動所有相同的地方
  15. 15. DEMO• Input form and preview by observable
  16. 16. COMPUTED FIELD• 自動偵測相關欄位的變動, 及時產生新值• 適合用於特殊顯示格式, 組合字串…等等• 黑暗執行緒 – 使用ko.computed實現資料檢核http://webcache.googleusercontent.com/search?q=cache:http://blog.darkthread.net/post-2012-09-27-kolab17.aspx
  17. 17. DEMO• ko.computed
  18. 18. CUSTOM BINDING• 根據自己的需求進行擴充• 客製化控制項• 重用性高!
  19. 19. DEMO• Create kendo numeric input binding
  20. 20. TEMPLATE• 產品展示清單• 列表模式及圖示模式• 透過Template動態切換樣板
  21. 21. DEMO• Use template dynamic change layout
  22. 22. 結論• 關注點分離(Separation of concerns)的精神• 發揮你的想像力• 沒有最好的Framework,只有最適合你的Framework
  23. 23. USEFUL KNOCKOUT PLUGINS• Knockout Mappinghttp://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/
  24. 24. 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
  25. 25. Thanks you!

×