Soumettre la recherche
Mettre en ligne
Rock with knockout
•
Télécharger en tant que PPTX, PDF
•
5 j'aime
•
1,670 vues
Kirk Chen
Suivre
Signaler
Partager
Signaler
Partager
1 sur 25
Télécharger maintenant
Recommandé
享受当下 -活在2010
享受当下 -活在2010
ling yu
Inspire dgt 網路技術分享_css+js_20110307
Inspire dgt 網路技術分享_css+js_20110307
inspire digital
Angular js 入門介紹
Angular js 入門介紹
wantingj
Html js css_aha
Html js css_aha
Cheng-Yu Lin
2013-04-13_JSTW-security-for-frontend-engineer (前傳)
2013-04-13_JSTW-security-for-frontend-engineer (前傳)
Yi-Feng Tzeng
Mobile Web Game 開發心得分享
Mobile Web Game 開發心得分享
世欽 陳
改善Programmer生活的sql技能
改善Programmer生活的sql技能
Rack Lin
Fl介绍
Fl介绍
Welefen Lee
Recommandé
享受当下 -活在2010
享受当下 -活在2010
ling yu
Inspire dgt 網路技術分享_css+js_20110307
Inspire dgt 網路技術分享_css+js_20110307
inspire digital
Angular js 入門介紹
Angular js 入門介紹
wantingj
Html js css_aha
Html js css_aha
Cheng-Yu Lin
2013-04-13_JSTW-security-for-frontend-engineer (前傳)
2013-04-13_JSTW-security-for-frontend-engineer (前傳)
Yi-Feng Tzeng
Mobile Web Game 開發心得分享
Mobile Web Game 開發心得分享
世欽 陳
改善Programmer生活的sql技能
改善Programmer生活的sql技能
Rack Lin
Fl介绍
Fl介绍
Welefen Lee
Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
Kirk Chen
Full stack-development with node js
Full stack-development with node js
Xuefeng Zhang
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
浏览器渲染与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 ...
jasonzheng50
OpenSCAD Workshop
OpenSCAD Workshop
Justin Lin
Go for web
Go for web
Weng Wei
July.2011.w3ctech
July.2011.w3ctech
Kai Cui
前端也能變全端
前端也能變全端
ericpi Bi
移动端跨平台技术原理
移动端跨平台技术原理
gorillazf
借助 MongoDB 实现扩展
借助 MongoDB 实现扩展
MongoDB
數學系的資訊人生
數學系的資訊人生
Jintin Lin
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
Will Huang
貪食蛇
貪食蛇
Weizhong Yang
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
Jia Mi
初探工程師升級手冊 2022
初探工程師升級手冊 2022
Caesar Chi
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
Hsu Ping Feng
Kubernetes on gcp
Kubernetes on gcp
Tech Podcast Night
排行榜V3项目总结
排行榜V3项目总结
Frank Xu
Contenu connexe
Similaire à Rock with knockout
Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
Kirk Chen
Full stack-development with node js
Full stack-development with node js
Xuefeng Zhang
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
浏览器渲染与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 ...
jasonzheng50
OpenSCAD Workshop
OpenSCAD Workshop
Justin Lin
Go for web
Go for web
Weng Wei
July.2011.w3ctech
July.2011.w3ctech
Kai Cui
前端也能變全端
前端也能變全端
ericpi Bi
移动端跨平台技术原理
移动端跨平台技术原理
gorillazf
借助 MongoDB 实现扩展
借助 MongoDB 实现扩展
MongoDB
數學系的資訊人生
數學系的資訊人生
Jintin Lin
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
Will Huang
貪食蛇
貪食蛇
Weizhong Yang
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
Jia Mi
初探工程師升級手冊 2022
初探工程師升級手冊 2022
Caesar Chi
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
Hsu Ping Feng
Kubernetes on gcp
Kubernetes on gcp
Tech Podcast Night
排行榜V3项目总结
排行榜V3项目总结
Frank Xu
Similaire à Rock with knockout
(20)
Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
Full stack-development with node js
Full stack-development with node js
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
浏览器渲染与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 ...
OpenSCAD Workshop
OpenSCAD Workshop
Go for web
Go for web
July.2011.w3ctech
July.2011.w3ctech
前端也能變全端
前端也能變全端
移动端跨平台技术原理
移动端跨平台技术原理
借助 MongoDB 实现扩展
借助 MongoDB 实现扩展
數學系的資訊人生
數學系的資訊人生
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
貪食蛇
貪食蛇
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
初探工程師升級手冊 2022
初探工程師升級手冊 2022
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
Kubernetes on gcp
Kubernetes on gcp
排行榜V3项目总结
排行榜V3项目总结
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
3.
那些年,我們寫過的CODE…
4.
開發系統常見的需求 • 日期選擇器 • 格式化數字 •
選擇顏色 • More…
5.
動手開發
6.
需求異動來了… • 我想要增加兩個日期欄位, 兩個價格欄位 •
我想要改版型 • 我想要打十個批次輸入 • 我想要…
7.
改變的時刻…
8.
我們需要KNOCKOUT….
9.
MVVM PATTERN View ViewModel JSON WebService Value
Changed Event Triggerd Data Updated
10.
HTML和JAVASCRIPT分離 ViewModel View
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
17.
DEMO • ko.computed
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!
Télécharger maintenant