Rock with knockout
Download as PPTX, PDF5 likes1,674 views
本文件介绍了使用 Knockout.js 的开发方法，强调了 MVVM 模式和数据绑定的重要性。通过示例演示了如何实现 HTML 和 JavaScript 的分离，以及动态模板的使用。最后，提到了一些有用的 Knockout 插件和资源链接。
![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](https://image.slidesharecdn.com/rockwithknockout-130518221751-phpapp01/85/Rock-with-knockout-24-320.jpg)
Rock with knockout
- 1. 流浪小風@JSDC 2013 ROCK WITH KNOCKOUT.JS
- 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
- 4. 開發系統常見的需求 • 日期選擇器 • 格式化數字 • 選擇顏色 • More…
- 5. 動手開發
- 6. 需求異動來了… • 我想要增加兩個日期欄位, 兩個價格欄位 • 我想要改版型 • 我想要打十個批次輸入 • 我想要…
- 7. 改變的時刻…
- 9. MVVM PATTERN View ViewModel JSON WebService Value Changed Event Triggerd Data Updated
- 11. DEMO • Binding View And ViewModel • Knockout.js Documention http://knockoutjs.com/documentation/introduction.html
- 12. WHY KNOCKOUT.JS • Html和JavaScript分離，透過Binding繫結 • 設計人員和開發人員可同時進行 • 獨立, 可與其他函示庫相容 • 程式碼易於測試 • 客製化屬於自己的Binding
- 13. 神奇的KNOCKOUT.JS
- 14. TWO WAY DATABINDING • Assign ko.observable() • 一處變動, 連動所有相同的地方
- 15. DEMO • Input form and preview by observable
- 16. COMPUTED FIELD • 自動偵測相關欄位的變動, 及時產生新值 • 適合用於特殊顯示格式, 組合字串…等等 • 黑暗執行緒 – 使用ko.computed實現資料檢核 http://webcache.googleusercontent.com/search?q=cache:http://blog.darkthread.net/p ost-2012-09-27-kolab17.aspx
- 18. CUSTOM BINDING • 根據自己的需求進行擴充 • 客製化控制項 • 重用性高!
- 19. DEMO • Create kendo numeric input binding
- 20. TEMPLATE • 產品展示清單 • 列表模式及圖示模式 • 透過Template動態切換樣 板
- 21. DEMO • Use template dynamic change layout
- 22. 結論 • 關注點分離(Separation of concerns)的精神 • 發揮你的想像力 • 沒有最好的Framework，只有最適合你的Framework
- 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. 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. Thanks you!