選出正確的函式庫
創建一個JS APP沒有好的工具是很困難的，jQuery只是操作DOM的庫，沒有提供任何創建APP的基礎，這就是為什麼我們要一個類似CanJS的專門的庫。
CanJS 是一個輕量級的MVC庫，提供你創建一個JS APP所需的工具。
CanJS 是一個輕量級的MVC庫，提供你創建一個JS APP所需的工具。 它提供具有MVC (Model-View-Control) 模式的基本框架，模板動態綁定， route的支援且 記憶體安全。同時支援 jQuery, Zepto, Mootools, YUI, Dojo，有豐富的擴充和插件。
第一部分你將學到：
建立Control控制層 和 View 視圖層(UI模板) 來顯示聯絡人
用Model模型層來表示資料
使用 fixtures 插件模擬ajax返回資料
你肯定激動了！我們開始碼代碼吧。
建立好你的資料夾和HTML
你先給你的APP建立一個資料夾，目錄下再建立4個子資料夾：css, js,views 和 img。如下：
contacts_manager
css
js
views
img
儲存以下的程式碼為 index.html：
在頁面的底部你載入所需的JS（包括你的APP：contacts.js）。
教學中用到的CSS和圖片檔可以下載。
用View來打造你的UI
View是用來渲染你APP的UI模板。 CanJS 支援多種模板引擎，本文用EJS ，CanJS包含有而且支援動態綁定。
EJS 範本的標籤與HTML很像，支援包含JS程式碼，三種常用標籤如下：
執行JS
執行JS，並將非轉義的結果寫入目前位置的HTML
執行JS，並將轉義的結果寫入目前位置的HTML(用於子模板).
模板可以從檔案或script標籤載入得到，本教學從 EJS 檔案載入。
顯示聯絡人
要建立聯絡人，你得先建立一個EJS 模板，儲存以下程式碼為contactsList.ejs 進你的views 資料夾：
contactLists.ejs 會渲染一個聯絡人列表，我們分析此模板:
list()方法裡的回呼方法如果配合配置有觀察者的list使用時，一旦list的資料發生改變就運用動態綁定重複呼叫。
以上程式碼透過元素的回呼方法產生 一個有聯絡人資料的
以上程式碼將子範本contactView.ejs 渲染成一個聯絡人。 can.view.render() 以模板和資料為參數傳回HTML。
渲染單一聯絡人
子範本是將view組織成可管理區塊的好方法。 同時也讓你的模板簡單和易於重複使用。教學後面將會用到此範本來建立聯絡人，將下面的程式碼儲存為contactView.ejs 進 views 資料夾：
蒸發器的屬性都放入了 ; 標籤裡，這就可以編輯更新使用者的資料。
啟動你的視野（好文藝。。）
EJS 處理範本過程中如果可用到 attr() ，它周圍的程式碼將由事件處理器管理交接，監聽對應屬性的變化，當屬性發生變化時，APP 中關聯的 UI 將會被更新。功能受益於模板動態綁定，EJS的動態綁定是有綁定的，只有使用了attr()時才會為機制的屬性開啟。
我們透過 contactView.ejs 中的一個標籤來了解它的用法：
使用can.Control處理業務邏輯
can.Control 創建了一個可組織，內部無洩漏，全權控制器，可以用於創建小部件或處理業務邏輯。您透過所需的資料為一個 DOM 元素建立一個 Control 實例，可以在您的 Control 中定義方法綁定事件。
當 Control 所關聯的元素從 DOM 被刪除時，Contol 會自行去找自己，同時清除所關聯的方法。
要建立一個 Control，透過確定你定義的包含有函數的物件給 can.Control() 來實現繼承。接下來的事件也給傳進去了。
每個Contol實例都有幾個重要的值和方法規格：
這 – 控制實例的引用
this.element – 實例中你所建立的 DOM 元素
this.options – 建立實例所需的參數物件
init() – 當實例建立成功時被呼叫
管理蒸發器
將以下程式碼片段加入 contacts.js 檔案來建立管理斯托克的控制項：
當 Contacts 的實例被建立時， init() 會做兩件事：
使用can.view() 來渲染聯絡人。 can.view() 接收兩個參數：包含有範本和資料的檔案或stript標籤；將會傳回一個documentFragment (一個管理DOM元素的輕量容器)。
使用jQuery.html()將can.view() 的documentFragment 插入Control的元素
使用Model來表現資料
Model 是APP資料的抽象層。本APP用到兩個Model：一個對應聯絡人，一個對應類別。將以下程式碼加入contacts.js：
一個model 有5個方法可能定義來CRUD數據， 分別是findAll, findOne, create, update 和 destroy。你可以重寫這幾個方法，不過最好的方法就是使用 REST 服務（Representational State Transfer表述性狀態轉移）。如同上面的程式碼，你放心的忽略APP中不會用到的靜態方法了。
這裡要重點指出的是，model實例其實是源自 CanJS 的‘observables'。 can.Observe 提供物件的觀察者模式can.Observe.List 提供陣列的觀察模式。這表示你可以透過attr()來get和set數據，同時監聽數據的變動。
findAll() 方法傳回一個 Model.list，就是當元素被加入或移除時 can.Observe.List 所觸發的事件。
使用Fixture來模仿Rest
Fixture攔截 AJAX 請求並透過檔案或方法來模擬應答。這對測試，或者在後端還沒有就緒時是非常有用的。 Fixture就是APP的model模擬REST所需要的。
首先，你要準備一些資料給fixture，加入以下程式碼到：
加入以下程式碼到contacts.js：
最初の 4 つのフィクスチャは、Contact モデルの GET、POST、PUT、および DELETE レスポンスをシミュレートし、5 番目のフィクスチャは、Category モデルの GET レスポンスをシミュレートします。
アプリを起動
あなたのアプリには、データを管理するモデル、連絡先を表示するビュー、そしてそれらすべてを整理するコントロールがあります。あとはアプリを起動するだけです。次に、アプリケーションをキックスタートする必要があります!
次のコードを contacts.js に追加します:
このコードを分析してみましょう:
2 つの findAll() メソッドから Model インスタンスに対応するデータ セットを取得します。 応答によって返される配列の最初の要素です。
概要
これはチュートリアル シリーズの最初の記事です。CanJS の核心はすでに理解されています。
モデル APP データの抽象化レイヤー
データを HTML に変換するビュー テンプレート
コントロールはすべてを整理します
