只需要五個簡單的步驟，就可以做好使用 Knockout 開發的准備！
第一步 我們需要什么？
最低限度，為了完成后面的教程，你需要如下的准備
- Web 瀏覽器
- 文本編輯器
- 你的電腦上大約 2M 的磁盤空間
- 基本的 Web 服務器
Knockout 的開發可以在大多數你可以安裝上面軟件的操作系統上進行。
為了完成這個教程，我將會使用 Chrome 瀏覽器。這個瀏覽器是免費的，並且可以安裝在多個操作系統上，包括 Windows操作系統和Mac 操作系統。你可以在這里 http://www.google.com/chrome 下載這個軟件。我選擇的文本編輯器也會同時兼顧到文本編輯工作和 web 服務器。我將會使用微軟的 WebMatrix 開發工具。這個免費的工具工作在 Windows 操作系統之上。可以從這里下載 http://www.microsoft.com/web/webmatrix/ 這個軟件。我會使用 IIS Express 作為基本的 Web 服務器。它可以從這里下載：http://www.microsoft.com/en-us/download/details.aspx?id=1038。如果你使用的是 Mac 系統或者 Linux 系統，這些系統中也有大量很棒的文本編輯器和 Web 服務器可以免費下載和使用。
當然，如果你使用 VS 進行學習的話，那就什么都有了。
第二步 創建一個起始站點
現在，工具已經有了，我們需要一個工作平台來開始應用的開發，我使用工作台這個詞，是因為在這個教程中，我們將會創建許多不同的文件。一些被簡單的用來作為示例，其它的一些將會作為應用的一部分。在開始學習的時候，我通常建議在你的計算機的某個方便的地方，比如桌面上，創建一個文件夾來包含我們將要使用的所有文件及其文件夾。我創建的文件夾如下圖所示。
Js 文件夾中將會用來保存我們所有的腳本文件，css 文件夾中將會用來保存項目中使用的所有的樣式文件。我們可以通過許多途徑來創建這樣的文件結構，我最喜愛的方式是訪問http://html5boilerplate.com/ 網站，然后下載這里的模版。這個網站提供了站點的結構 ( 或者樣板 ) ，其中包含許多你不會想到處理的內容，比如一個 robots.txt 文件。
一旦你創建了網站的結構，確認你創建了名為 index.html 的首頁文件。在這個教程中，我們的首頁如下所示：
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Knockout Starter Guide</title> <!-- CSS Here--> </head> <body> <div id="content"> <p>Hello World!</p> </div> <!-- JavaScript Files Here --> </body> </html> |
這將是我們應用的起點，我們為腳本和樣式表提供了占位符。
第三步 下載 Knockout
現在，魔術開始了，為了創建 Knockout 應用，我們必須擁有 Knockout 腳本庫，最好的辦法就是到 Knockout 官方網站http://www.knockoutjs.com/ 去下載。
一旦你訪問到 Knockout 站點，點擊頁面上部的 Download/Install 鏈接，然后按照頁面提示進行下載。
我們的教程使用knockout-2.3.0.debug.js 腳本庫，我們將需要把這個文件保存到 Js 文件夾中。
第四步 創建應用的主腳本文件
現在，我們需要創建用來保存所有腳本的腳本文件了，我們需要創建名為 app.js 的腳本文件。把它保存到 js 文件夾中。開始的時候，文件中是包含下面內容的空的腳本文件。
| // main application code here |
現在，Knockout 腳本庫已經下載了，我們的主腳本文件也已經創建了。我們需要在 index.html 文件中包含這些腳本文件。我們使用經典的 script 標記來引用腳本文件。下面的示例演示了如何在頁面的底部引用腳本文件。
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Knockout Starter Guide</title> <!-- CSS Here--> </head> <body> <div id="content"> <p>Hello World!</p> </div> <!-- JavaScript Files Here--> <script type="text/javascript" src="/JS/knockout-2.1.0.debug.js"></script> <script type="text/javascript" src="/JS/App.js"></script> </body> </html>
|
有一些原因使我們將腳本文件在頁面的底部進行引用，第一個原因是可以使頁面更快地呈現在用戶面前，因為可視的標記在腳本之前被加載和處理了。這樣，在腳本下載和處理的過程中，頁面就可以顯示在瀏覽器的窗口中，第二，Knockout 是通過瀏覽器的 Document Object Model ( DOM ) 工作的，為了使這個機制工作，就需要瀏覽器首先創建頁面的 DOM 模型，在 Knockout 工作之前，創建和渲染內部部分。還有需要有利的原因使得我們將腳本在頁面的底部進行引用，但是，這些討論已經超出了本教程的范圍，所以，作為一個最佳實踐，我們將腳本放置在頁面的底部，來為用戶創建最佳的使用體驗。
第五步 運行應用
現在，我們的站點已經創建起來了。運行一下，確認一切可以正常工作。我正在使用 WebMatrix，所以，在 Index.html 文件上點擊運行，如果你使用其它的 Web 服務器，也同樣從我們站點的根目錄開始。
在我的截圖中，可以看到 WebMatrix 使用端口 11790 作為網站的服務端口。這個端口依賴於你使用的電腦。Hello, world. 就是我們 index.html 頁面中當前的內容。棒極了！我們已經擁有了正在工作的 JavaScript 腳本應用。
為了確認我們的腳本正確工作，沒有任何 bug 存在。我們需要啟動瀏覽器的開發人員工具，在 Chrome 瀏覽器中，點擊位於右上角的快捷圖標，找到工具 -> 開發人員工具，調試器就會出現在瀏覽器窗口的下部，看起來如下所示。
如果點擊調試器的 Source 窗格，我們會看到被加載到頁面中的 Javascript 腳本，在下一個截圖中，可以看到 app.js 和剛剛下載的 knockout 腳本庫被正確加載了。還有重要的是，頁面中沒有任何的 javascript 錯誤。我們還可以看到在調試器的右下角沒有任何的錯誤警告。如果頁面中出現任何問題，就會在這里看到一個警示圖標和表示錯誤數量的數字。
如果你沒有使用 Chrome 瀏覽器，你可以搜索你的瀏覽器的文檔來查看如何捕獲和顯示 JavaScript 錯誤。