流浪小風@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/p
ost-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 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/

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

Thanks you!