SlideShare a Scribd company logo
流浪小風@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!

More Related Content

Similar to Rock with knockout

Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
Kirk Chen
 
Full stack-development with node js
Full stack-development with node jsFull stack-development with node js
Full stack-development with node js
Xuefeng Zhang
 
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
 
浏览器渲染与web前端开发
浏览器渲染与web前端开发浏览器渲染与web前端开发
浏览器渲染与web前端开发
Duoyi Wu
 
合久必分,分久必合
合久必分,分久必合合久必分,分久必合
合久必分,分久必合
Qiangning Hong
 
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
jasonzheng50
 
OpenSCAD Workshop
OpenSCAD WorkshopOpenSCAD Workshop
OpenSCAD Workshop
Justin Lin
 
Go for web
Go for webGo for web
Go for web
Weng Wei
 
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctechKai Cui
 
前端也能變全端
前端也能變全端前端也能變全端
前端也能變全端ericpi Bi
 
移动端跨平台技术原理
移动端跨平台技术原理移动端跨平台技术原理
移动端跨平台技术原理gorillazf
 
借助 MongoDB 实现扩展
借助 MongoDB 实现扩展借助 MongoDB 实现扩展
借助 MongoDB 实现扩展
MongoDB
 
數學系的資訊人生
數學系的資訊人生數學系的資訊人生
數學系的資訊人生
Jintin Lin
 
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
Will Huang
 
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)Jia Mi
 
初探工程師升級手冊 2022
初探工程師升級手冊 2022初探工程師升級手冊 2022
初探工程師升級手冊 2022
Caesar Chi
 
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統Hsu Ping Feng
 
Kubernetes on gcp
Kubernetes on gcpKubernetes on gcp
Kubernetes on gcp
Tech Podcast Night
 
排行榜V3项目总结
排行榜V3项目总结排行榜V3项目总结
排行榜V3项目总结Frank Xu
 

Similar to Rock with knockout (20)

Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
 
Full stack-development with node js
Full stack-development with node jsFull stack-development with node js
Full stack-development with node js
 
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
 
浏览器渲染与web前端开发
浏览器渲染与web前端开发浏览器渲染与web前端开发
浏览器渲染与web前端开发
 
合久必分,分久必合
合久必分,分久必合合久必分,分久必合
合久必分,分久必合
 
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
 
OpenSCAD Workshop
OpenSCAD WorkshopOpenSCAD Workshop
OpenSCAD Workshop
 
Go for web
Go for webGo for web
Go for web
 
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctech
 
前端也能變全端
前端也能變全端前端也能變全端
前端也能變全端
 
移动端跨平台技术原理
移动端跨平台技术原理移动端跨平台技术原理
移动端跨平台技术原理
 
借助 MongoDB 实现扩展
借助 MongoDB 实现扩展借助 MongoDB 实现扩展
借助 MongoDB 实现扩展
 
數學系的資訊人生
數學系的資訊人生數學系的資訊人生
數學系的資訊人生
 
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
 
貪食蛇
貪食蛇貪食蛇
貪食蛇
 
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
 
初探工程師升級手冊 2022
初探工程師升級手冊 2022初探工程師升級手冊 2022
初探工程師升級手冊 2022
 
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
 
Kubernetes on gcp
Kubernetes on gcpKubernetes on gcp
Kubernetes on gcp
 
排行榜V3项目总结
排行榜V3项目总结排行榜V3项目总结
排行榜V3项目总结
 

Rock with knockout