选择正确的库

没有一个好的工具，创建一个JS APP是非常困难的。jQuery只是一个操作DOM的库，并没有为创建APP提供任何基础，这就是为什么我们需要一个像CanJS这样的特殊库。

CanJS是一个轻量级的MVC库，它提供了创建JS APP所需的工具。

CanJS是一个轻量级的MVC库，它提供了创建JS APP所需的工具。它提供了MVC(模型-视图-控制)模式的基本框架，模板的动态绑定，路由和内存安全的支持。同时，它支持jquery、zepto、mootools、yui和Dojo，具有丰富的扩展和插件。

在第一部分中，您将学习：创建控制层和视图层(UI模板)来显示联系人，使用模型层来表示数据，以及使用夹具插件来模拟ajax返回数据。你一定很兴奋吧！让我们开始编码。设置你的文件夹和HTML。您应该首先为您的APP创建一个文件夹，然后在目录下设置四个子文件夹：css、js、views和img。如下所示：contacts _ managercssjsviewsimg

将以下代码保存为index.html:

复制代码如下：doctype html html lang=' en ' head meta charset=' utf-8 ' title canjs Contacts Manager/title link rel='样式表' href=' CSS/bootstrap . min . CSS ' link rel='样式表' href=' CSS/Contacts . CSS '/head body div class=' container ' div class=' row ' div class=' span 12 ' h1 Contacts Manager/h1/div/div class=' row ' div class=' span 3 ' div class=' well ' nav id=' filter '/

在页面的底部，您加载所需的JS(包括您的APP:contacts.js)。教程中用到的CSS和图片文件都可以下载。

使用视图构建用户界面

视图是一个用户界面模板，用于渲染您的应用程序。CanJS支持各种模板引擎。本文使用EJS和CanJS来包含和支持动态绑定。EJS模板的标签与HTML非常相似，HTML支持JS代码。常用的标签有以下三种：% CODE % execute JS %=CODE % execute JS，将非转义结果写入当前位置的HTML%==CODE% execute JS，将转义结果写入当前位置的HTML(对于子模板)。模板可以从文件或脚本标签加载，本教程从EJS文件加载。

显示联系人

要创建联系人，您必须首先创建一个EJS模板，并将以下代码作为contactsList.ejs保存到视图文件夹中：

复制代码如下： ul class=' clear fix ' % list(contacts，function(contact){ % Li class=' contact span 8 ' %=(El)-El . data(' contact，contact)%==can . view . render(' view/contact view . ejs '，{ contact: contact，categories : categories })%/Li % })%/ul

ContactLists.ejs将呈现一个联系人列表。我们来分析一下这个模板：

复制代码如下：%列表(联系人，功能(联系人){%

如果list()方法中的回调方法与配置了观察器的列表一起使用，一旦列表的数据发生变化，就会使用动态绑定反复调用。

复制代码如下： Li class=' contact span 8 ' %=(El)-El . data(' contact '，contact)%

上面的代码通过元素的回调方法生成一个带有联系数据的li。执行箭头后面的方法后，将el对象的数据设置为相应的元素。

复制代码如下：%==can . view . render(' view/contact view . ejs '，{contact3360contact，categories 3360categories})%

上面的代码将子模板contactView.ejs呈现为一个联系人。Can.view.render()返回以模板和数据为参数的HTML。

呈现单个联系人

子模板是将视图组织成可管理块的好方法。它还使您的模板简单且易于重用。本教程稍后将使用此模板来创建联系人。将以下代码保存为contactView.ejs，并将其输入视图文件夹：

复制的代码如下： a href=' JavaScript 3360/' class=' remove ' I class=' icon-remove '/I/a form div class=' row ' div class=' span 2 ' img src=' http : img/contact . png ' width=' 100 ' height=' 100 '/div class=' span 3 '输入类型='text' name='name '占位符='Add Name' %=contact.attr('namevalue=' ' contact . name ' ' ' : ' class=' empty ' ' % select name=' category ' % $。每个(类别，函数(I，类别){ % option value=' %=category . data % ' %=contact . category===category . data？选中的“:”% %=category . name %/option % })%/select/div class=“span 3”labelAddress/label输入类型=“text”name=“address”%=contact . attr(' address ')？value=' ' contact . address ' ' ' : ' class=' empty ' ' % label phone/label输入类型=' text ' name=' phone ' %=contact . attr(' phone ')？value=' ' contact . phone ' ' ' : ' class=' empty ' ' % labelEmail/label输入类型=' text ' name=' email ' %=contact . attr(' email ')？value=' ' contact . email ' ' ' : ' class=' empty ' ' %/div/div/form

联系人的属性都放在输入标签中，这样您就可以编辑和更新用户的信息。

激活你的视野(好的文艺。)

如果在EJS模板处理过程中使用attr()，那么它周围的代码将由事件处理程序管理，并且相应属性的变化将被监控。当属性发生变化时，APP中关联的UI会更新。这个函数得益于模板动态绑定机制。EJS的动态绑定是选择性的，只有在使用attr()时，才会为相应的属性打开。我们通过contactView.ejs中的一个输入标签知道它的用法：

复制代码如下：输入类型=' text' name=' name '占位符=' add name'%=contact.attr ('name ')？值=' '联系人。name'' :' class=' empty''%特殊标记中的代码将被转换为事件并绑定到此联系人的name属性。当name属性更改时，将触发事件，并更新HTML结构。

用罐头。控件来处理业务逻辑

加拿大控件创建一个可组织的、无泄漏的全功率控制器，可用于创建小部件或处理业务逻辑。您可以使用所需的数据为DOM元素创建一个控件实例，并且可以在控件中定义方法绑定事件。当与控件关联的元素从DOM中删除时，Contol将销毁自身并清除绑定的方法。若要创建控件，可以通过将包含函数的已定义对象传入can来继承它。控件()。然后事件就传开了。每个Contol实例都有几个重要的值和方法规范：这是控件实例的引用。元素您在这个实例中创建的DOM元素。选项创建实例所需的参数对象init()在成功创建实例时调用

管理联系人

将以下代码片段添加到contacts.js文件中，以创建管理联系人的控件：

复制代码如下： contacts=can . control({ init : function(){ this . element . html(can . view(' view/contacts list . ejs ')，{ contacts 3360 this . options . contacts，categories 3360 this . options . categories })。}})

创建联系人实例时，init()将做两件事：使用can.view()呈现联系人。Can.view()接收两个参数：一个包含模板和数据的文件或者一个stript标签；将返回一个文档片段(用于管理DOM元素的轻量级容器)。使用jQuery.html()将can.view()的文档片段插入到控件的元素中

使用模型来表示数据

模型是APP数据的抽象层。本APP使用的Model有两个：一个对应联系人，一个对应类别。将以下代码添加到contacts.js中：

复制代码如下： contact=can . model({ findall 3360 ' get/contacts '，create:' post/contacts '，update:' put/contacts/{id} '，destroy 3360 ' delete/contacts/{ id } ' })。类别=可以。模型({ findAll: 'GET /categories'}，{ })；

有五种可能的方法来定义模型的CRUD数据，它们是findAll、findOne、创建、更新和销毁。您可以覆盖这些方法，但是最好的方法是使用REST服务(表示状态转移表示状态转移)。就像上面的代码一样，您可以放心地忽略不会在APP中使用的静态方法。

这里需要指出的重要一点是，模型实例实际上起源于CanJS的“observables”。加拿大Observe提供了对象可以的观察者模式。观察。列表提供了数组的观察模式。这意味着您可以通过attr()获取和设置数据，同时监控数据的变化。findAll()方法返回一个Model.list，它是由can触发的事件。观察。添加或删除元素时列出。

用夹具模仿休息

Fixture截获AJAX请求，并通过文件或方法模拟响应。这对于测试非常有用，或者当后端没有准备好的时候。夹具是APP的模型模拟REST所需要的。首先，您需要为夹具准备一些数据，并将以下代码添加到：

复制代码如下：VARContacts=[{ID : 1，名称：' William '，地址：' 1Can JSway '，电子邮件3360' [Email Protected]'，电话3360' 0123456789 '。category: 'co-workers' }，{ id: 2，name: 'Laura '，address: '1 CanJS Way '，email: '[emailprotected]'，phone: '0123456789 '，category: 'friends' }，{ id: 3，name: ' Lee '，address 3: ' 1 CanJS Way '，email 333366var CATEGORIES=[ { id: 1，name: 'Family '，data: 'family' }，{ id: 2，name: 'Friends '，data: 'friends' }，{ id: 3，name: 'Co-workers '，data : ' Co-workers ' }]；当你有数据时，把它连接到夹具来模拟REST。Can.fixture()接收两个参数。我们要拦截的网址以及我们用来回复的文件和方法。通常，您想要阻止的URL是动态的，并且遵循一种模式。在网址中添加由{}括起来的通配符。

将以下代码添加到contacts.js中：

复制代码如下：can.fixture ('get/contacts '，function(){ return[contacts]；});var id=4；can.fixture('POST /contacts '，function(){ return { id :(id)} })；can.fixture('PUT /contacts/{id} '，function(){ return }；});can . fixture(' DELETE/contacts/{ id } '，function(){ return }；});can.fixture('GET /categories '，function(){ return[CATEGORIES]；});

前四个夹具模拟接触模型的GET、POST、PUT和DELETE响应，第五个夹具模拟类别模型的GET响应。

启动应用程序

您的应用程序有一个用于管理数据的模型、一个用于呈现联系人的视图和一个用于组织所有这些事情的控件。我们现在要做的就是启动APP。现在您需要强制启动应用程序！将以下代码添加到contacts.js中：

副本代码如下： $(文档)。ready (function () {$)。当(类别。findall()，联系。findall())。然后(函数(类别响应，contact response){ var categories=categoryrresponse[0]，contacts=contact response[0]；新联系人(' #contacts '，{ contacts: contacts，categories : category })；});});

让我们分析一下这段代码：

副本代码如下： $(文档)。ready(function(){使用jQuery.ready方法监听DOM的ready。

副本代码如下： $。当(类别。findAll()，联系。findAll())。然后(函数(类别响应，联系人响应){调用两个Model的findall()方法，得到所有联系人的类型。因为findall()有延迟，$。when()确保两个请求在执行前同时完成。

复制代码如下： varcategories=category response[0]，contacts=contact response[0]；

从两个findAll()方法中获取对应模型实例的数据集。是响应返回的数组的第一个元素。

复制代码如下：新联系人(' #联系人'，{联系人：联系人，类别：类别})；为#contacts元素创建联系人控制。联系人和类型数据集被传递到控制中。使用浏览器打开您的应用程序，您将看到以下联系人列表：

摘要

这是第一个教程系列的第一篇文章。您已经理解了CanJS的核心：模型、应用程序数据的抽象层、视图、将数据转换为HTML的模板、控件和组织一切。