Successfully reported this slideshow.
Your SlideShare is downloading. ×

Rock with knockout

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
享受当下  -活在2010
享受当下 -活在2010
Loading in …3
×

Check these out next

1 of 25 Ad
Advertisement

More Related Content

Similar to Rock with knockout (20)

Advertisement

Rock with knockout

  1. 1. 流浪小風@JSDC 2013 ROCK 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 PATTERN View ViewModel JSON WebService Value Changed Event Triggerd Data Updated
  10. 10. HTML和JAVASCRIPT分離 ViewModel View
  11. 11. DEMO • Binding View And ViewModel • Knockout.js Documention http://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/p ost-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 Mapping http://knockoutjs.com/documentation/plugins-mapping.html • Knockout Validation https://github.com/Knockout-Contrib/Knockout-Validation • Knockout Postbox https://github.com/rniemeyer/knockout-postbox/ • Knockout-Kendo.js http://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.mvv m.aspx
  25. 25. Thanks you!

×