[b]选择正确的库[/b] 创建一个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和图片文件可以下载。 [b]用View来打造你的UI[/b] View是用来渲染你APP的UI模板。CanJS 支持多种模板引擎，本文用EJS ，CanJS包含有而且支持动态绑定。 EJS 模板的标签与HTML很像，支持包含JS代码，三种常用标签如下： <% CODE %> 执行JS <%= CODE %> 执行JS，并将非转义的结果写入当前位置的HTML <%== CODE %>  执行JS，并将转义的结果写入当前位置的HTML(用于子模板). 模板可以从文件或者script标签中加载得到，本教程从 EJS 文件加载。 [b]显示联系人[/b] 要创建联系人，你得先建立一个EJS 模板，保存以下代码为contactsList.ejs 进你的views 文件夹：

[url=javascript://] <form> <div class="row">   <div class="span2">     <img src="img/contact.png" width="100" height="100">   </div>   <div class="span3">     <input type="text" name="name" placeholder="Add Name"       <%= contact.attr('name') ? "value='" + contact.name + "'" : "class='empty'" %>>     <select name="category">       <% $.each(categories, function(i, category){ %>         <option value="<%= category.data %>" <%= contact.category === category.data ? "selected" : "" %>>           <%= category.name %>         </option>       <% }) %>     </select>   </div>   <div class="span3">     <label>Address</label>     <input type="text" name="address"       <%= contact.attr('address') ? "value='" + contact.address + "'" : "class='empty'" %>>     <label>Phone</label>     <input type="text" name="phone"       <%= contact.attr('phone') ? "value='" + contact.phone + "'" : "class='empty'" %>>     <label>Email</label>     <input type="text" name="email"       <%= contact.attr('email') ? "value='" + contact.email + "'" : "class='empty'" %>>   </div> </div> </form>

联系人的属性都放入了 <input> 标签里，这就可以编辑更新用户的资料。 [b]活化你的View[/b]（好文艺。。） EJS 处理模板过程中如果有用到attr() ，它周围的代码将会交由事件处理器管理，监听对应属性的变化，当属性发生变化，APP中关联的UI将会被更新。这功能利益于模板动态绑定机制，EJS的动态绑定是有选择性的，只有使用了attr()时才会为对应的属性开启。 我们通过 contactView.ejs 中一个<input>标签来了解它的用法： 特殊标记里的代码将转变成事件绑定到此联系人的name属性上。当name属性发生变化，事件将被触发同时HTML结构会被更新。 [b]使用can.Control来处理业务逻辑[/b] can.Control 创建了一个可组织，内在无泄漏，全权控制器，能用来创建widget或者处理业务逻辑。你通过所需要数据为一个DOM元素创建一个Control实例，可以在你的Control中定义方法绑定事件。 当 Control 所关联的元素从DOM被删除时，Contol会自去销毁自己，同时清除所绑定的方法。 要创建一个 Control，通过传入你定义的包含有函数的对象给 can.Control() 来实现继承。接下来事件也给传进去了。 每个Contol实例都有几个重要的值和方法规范： this –  Control 实例的引用 this.element – 实例中你所创建的DOM 元素 this.options – 创建实例所需要的参数对象 init() – 当实例创建成功时被调用 [b]管理联系人 [/b] 将以下代码片段添加到contacts.js 文件来创建管理联系人的Control：

[url=]'william@husker.com'[/url],     phone: '0123456789',     category: 'co-workers'   },   {     id: 2,     name: 'Laura',     address: '1 CanJS Way',     email: [url=]'laura@starbuck.com'[/url],     phone: '0123456789',     category: 'friends'   },   {     id: 3,     name: 'Lee',     address: '1 CanJS Way',     email: [url=]'lee@apollo.com'[/url],     phone: '0123456789',     category: 'family'   } ];   var CATEGORIES = [   {     id: 1,     name: 'Family',     data: 'family'   },   {     id: 2,     name: 'Friends',     data: 'friends'   },   {     id: 3,     name: 'Co-workers',     data: 'co-workers'   } ];

有了数据，要将其连接到fixture来模拟REST 。can.fixture()接收两个参数。 我们要拦截的URL和我们应答用的文件和方法。通常你要拦截的URL都是动态且遵循一个模式的。在需要在URL里添加以{}括起的通配符即可。 添加以下代码到contacts.js： 前4个 fixture模拟 Contact model的GET, POST, PUT 和 DELETE 应答，第5个模拟 Category model的GET应答。 [b]启动APP [/b] 你的APP有管理数据的Model，渲染联系人的 View，将这一切组织起来的的Control。现在要做的就是启动APP了。 Now you need to kickstart the application! 将以下代码添加到contacts.js ： 我们来分析一下这段代码： 使用 jQuery.ready 方法监听DOM的ready。 调用两个Model的 findAll() 方法来获取全部联系人的类型，由于findAll() 有延时， $.when()则确保两个请求同时完成后才执行回调方法。 从两个 findAll() 方法中获取对应Model实例的数据集。 是应答所返回的数组的第一个元素。 为 #contacts 元素创建Contact 的Control 。联系人和类型数据集传进Control。 用浏览器打开你的APP，你将看到如下的联系人列表： [img]http://files.jb51.net/file_images/article/201409/201492690544513.png?20148269722[/img] [b]总结[/b] 这是第教程系列的第一篇，你已经了解了CanJS的核心： Models 你的APP数据的抽象层 Views 将数据转换成HTML的模板 Controls 组织关联一切