rock with knockout

流浪小風 @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!