Save 37% off PRO during our Black Friday Sale! »

Knockout 從零開始,實戰教學-twMVC#10

Da5dec3f0447a582c1f9d650edbe0142?s=47 twMVC
July 19, 2013

Knockout 從零開始,實戰教學-twMVC#10

講者:Jerry http://www.dotblogs.com.tw/lastsecret/(twMVC核心講者

簡介:
越來越多款JS MVVM framework,該怎麼選擇讓你毫無頭緒嗎?
不要錯過TW MVC所舉辦的這場Knockout實戰教學,帶你
從零開始了解Knockout的使用方式以及優缺點,幫助你更
了解未來的專案該如何選用及導入。

※本次課程包含上機實作,建議您攜帶NB或Pad一同參與,若無法
攜帶也可透過投影布幕體驗開發過程。

課程時間:90~120分鐘

Da5dec3f0447a582c1f9d650edbe0142?s=128

twMVC

July 19, 2013
Tweet

Transcript

  1. Knockout 從零開始,實戰教學 Jerry Chiang http://www.dotblogs.com.tw/lastsecret

  2. 2012 微軟最有價值專家(C#) twMVC 聯合創辦人之一 現職於TutorABC 2 講者簡介 Jerry Chiang http://www.dotblogs.com.tw/lastsecret

  3.  Blog  http://www.dotblogs.com.tw/lastsecret  Facebook  https://www.facebook.com/lastsecret628  Plurk

     http://www.plurk.com/lastsecret  Email  lastsecret628@gmail.com 3 聯絡我
  4. Knockout?是什麼? 為什麼要使用Knockout?什麼專案下使用? 範例講解,Knockout威力展示。 自己動作做,30分鐘了解Knockout基本用法。 4 大綱

  5.  Knockout 是一個 JavaScript 的 Library,透過他所提 供的 MVVM 模式的雙向綁定,可幫助建置一個乾淨、即時反 應的UI。

     題外話,什麼是MVVM?  由Model、View 及 ViewModel 所構成的架構,透過一些機制 使 View 與 ViewModel 之間做綁定或識別,建立起 Model 與 View 之間的溝通管道。 5 Knockout?是什麼?
  6.  簡化頁面綁定資料的複雜度  簡化頁面綁定事件的相依性  動態、即時的反應在UI上  便於透過資料動態決定 DOM 的屬性、結構

     使用範本的概念,讓動態的HTML更簡潔好維護。 6 為什麼要使用Knockout?什麼專案下使用?
  7.  頁面上只要控制View,其他資料來源都來自於外部  大量的 UI 操作  複雜的資料綁定 講者貼心叮嚀: 若此網站為一個獨立,且不需跟外部溝通即可完成的完整網站,

    建議好好透過 MVC 的架構撰寫即可。(大量使用AJAX除外) 7 為什麼要使用Knockout?什麼專案下使用?
  8.  只要知道一個 function 就可以進入 Knockout 的世界 ko.applyBindings() 8 範例講解,Knockout威力展示

  9.  太無聊嗎? 那在加幾個。  ko.observable()  ko.observableArray() data-bind=“text:Property” data-bind=“value:Property” data-bind=“foreach:ArrayProperty”

    9 範例講解,Knockout威力展示
  10. 10 範例講解,Knockout威力展示

  11. 步驟: 1. 撰寫 ViewModel 2. 對 HTML 元素做Model Binding 3.

    ko.applyBindings() 4. 操作 ViewModel 11 範例講解,Knockout威力展示
  12. http://twmvc10.mvc.tw 12 自己動作做,30分鐘了解Knockout基本用法 http://mvc10.hexdigits.com

  13.  九九乘法表解答  http://embed.plnkr.co/gT85dBvzEUXhbp2EIF8H/preview 13 自己動作做,30分鐘了解Knockout基本用法

  14. 謝謝各位 • 本投影片所包含的商標與文字皆屬原著作者所有。 • 本投影片使用的圖片皆從網路搜尋。 • 本著作係採用 Creative Commons 姓名標示-非商業性-相同方式分享

    3.0 台灣 (中華民國) 授權條款授權。 h t t p : / / m v c . t w