前端體驗之表單製作 - 使用KnockoutJS及Twitter Bootstrap (1)

最近應產品部門需求，將一份服務申請表(PDF格式)轉換為線上表單讓使用者填寫申請。由於輸入欄位不少且是個全新的功能，試著導入一些前端框架看能不能加速開發或是提昇UX，而選用的框架為KnockoutJS及Twitter Bootstrap。

KnockoutJS是在一年多前研究MVVM pattern時注意到它，當時對它處理前端的方式頗為讚嘆，因為使用它時可以大大地降低自己對DOM的處理(甚至完全不用自己處理DOM)，大部份時間只需要操作好ViewModel即可。但這一年多來苦無機會在實際專案使用它，直到最近才有機會。選用Twitter Bootstrap的原因則很單純，因為在一個沒有UI/UX designer的團隊裡，能有一個堪用且支援度不錯的UI框架可以使用對Developer來說是個不錯的選擇。

KnockoutJS

KnockoutJS的官方文件及範例寫得相當不錯，在開始實戰前先至Tutorials觀看教學，看看它能做些什麼。Turtorials有5個sections，先瀏覽Introduction、Working with Lists and Collections及Loading and saving data，看完後對KnockoutJS會有基本的認知。基本上看完後就可以準備實戰，並以官方的Documentation做為實戰時的參考，也建議有空的話可以把整個Documentation快速看過一遍，對操作KnockoutJS的能力會大大地提升也省去一些google的時間，因為Documentation介紹得蠻詳細的。接下來到Download / Install頁面下載安裝KnockoutJS，因為我是以VS 2008做為開發工具所以需手動安裝，VS2010以上則使用nuget安裝即可。

Twitter Bootstrap

Bootstrap的官方文件及範例也寫的不錯。在此需求中Bootstrap用來製作表單頁面及排版，主要使用到了Grid System、Tables、Forms、Buttons、Icons by Glyphicons、Alerts，其中Forms是最常參考的文件。Boostrap的安裝可參考ASP.NET MVC 4中使用Bootstrap或手動下載自行安裝。

接下來我們看看如何實作這需求，前端體驗之表單製作 - 使用KnockoutJS及Twitter Boostrap (2)。