選擇正確的庫

創建一個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代碼，三種常用標簽如下：
<% CODE %> 執行JS
<%= CODE %> 執行JS，并將非轉義的結果寫入當前位置的HTML
<%== CODE %>  執行JS，并將轉義的結果寫入當前位置的HTML(用于子模板).
模板可以從文件或者script標簽中加載得到，本教程從 EJS 文件加載。

顯示聯系人

要創建聯系人，你得先建立一個EJS 模板，保存以下代碼為contactsList.ejs 進你的views 文件夾：

contactLists.ejs 會渲染一個聯系人列表，我們分析一下此模板:

list()方法里的回調方法如果配合配置有觀察者的list使用時，一旦list的數據發生改變就運用動態綁定重復調用。

以上代碼通過元素的回調方法生成 一個有聯系人數據的<li>。 箭頭后的方法執行后將el對象的數據設置給對應的元素。

以上代碼將子模板contactView.ejs 渲染成一個聯系人。 can.view.render() 以模板和數據為參數返回HTML。

渲染單個聯系人

子模板是一個將view組織成可管理塊的好辦法。 同時也使你的模板簡單和易于重用。教程后面將會用到此模板來創建聯系人，將下面的代碼保存為contactView.ejs 進 views 文件夾：

聯系人的屬性都放入了 <input> 標簽里，這就可以編輯更新用戶的資料。

活化你的View（好文藝。。）

EJS 處理模板過程中如果有用到attr() ，它周圍的代碼將會交由事件處理器管理，監聽對應屬性的變化，當屬性發生變化，APP中關聯的UI將會被更新。這功能利益于模板動態綁定機制，EJS的動態綁定是有選擇性的，只有使用了attr()時才會為對應的屬性開啟。
我們通過 contactView.ejs 中一個<input>標簽來了解它的用法：

使用can.Control來處理業務邏輯

can.Control 創建了一個可組織，內在無泄漏，全權控制器，能用來創建widget或者處理業務邏輯。你通過所需要數據為一個DOM元素創建一個Control實例，可以在你的Control中定義方法綁定事件。
當 Control 所關聯的元素從DOM被刪除時，Contol會自去銷毀自己，同時清除所綁定的方法。
要創建一個 Control，通過傳入你定義的包含有函數的對象給 can.Control() 來實現繼承。接下來事件也給傳進去了。
每個Contol實例都有幾個重要的值和方法規范：
this