用Backbone.js创建一个联系人管理系统(五)

原文: Build a Contacts Manager Using Backbone.js: Part 5

这是这系列教程最后一部分了. 之前所有的增删改都在前端完成. 这部分我们要把Contact的数据存储到数据库里.

 开始准备

在这里我们需要一个Web服务器,还有一个数据库. 可以是SQLServer.我们需要在

数据库中创建一个表来存储Concat. 表还要有一个主键ID,最好这个ID是unique和

自增长类型的. 虽然现在我们的Concat model里没有这个属性但是要把它存储到数

据库里ID还是有必要的.

Backbone的sync()

sync是Backbone.js提供给我们和服务器沟通的模块. 这是我们唯一还没用到的重要模块.

理解它后我们就可以完整的了解Backbone.js的整个框架.

调用sync()方法可以向服务器发送一个请求. 假设这个方法是通过调用JQuery或者Zepto来执行的请求.

又假设一个RESTful接口在后台使用POST,PUT,GET,DELETE,HTTP等方法.就像我们看到的,Backbone

能够用在headers中加入预处理动作的方法来配置GET,POST方法的回调函数(我觉得应该是call back他写错了).

除了直接调用sync(),models和collections也有方法可以用来和数据库通信. models有destory(),fetch(),

parse()和save()方法, collection有fetch()和parse()方法.不管是models还是collections的destroy(),fetch()

和sync()方法性能都不如sync().parse()方法在服务器返回数据后自动调用. 默认不做任何操作只是返回数据库

响应,但是你重写它来添加你希望在服务器响应前做的操作.

页面载入时的操作

让model数据显示到页面中的方法依赖后台技术.Backbone官方文档中collection的fetch()方法提到,这个方法不

能在页面初始化的时候从服务器请求数据.这部分在精华问答区有提到,一个页面在所有必需的模块没有完全载入前

应该避免初始化AJAX请求.当我们还不清楚一件事的时候听从别人的建议是比较好的主意.这会让我们的应用程序更

加稳定.让model数据显示到页面中的方法依赖后台技术.我们在这个例子里要使用.net技术. 所以需要创建一个<script>

标签来动态加载需要的js模块到页面里.做完这些后我们要开始把原来的index.html改成index.aspx.  当然我也也

需要index.aspx.cs存放后台代码.但是这会产生一个问题.在ASPX页面中使用Underscore微模版.我们可以把

Underscore文档中的Mustache-style例子直接拿来用.现在的问题是Underscore的模版使用<%=作为指定的占位符

来代替实际数据.这和ASPX页面.net代码使用的一样.Underscore的模版我们在ASPX页面里运行会报出服务器错误.

很幸运有几种办法能解决这个问题,其中最简单的是在模版中修改使用占位符的语法.

Underscore提供的templateSettings这个属性就是为了解决这样的问题的.他能够很容易的用指定的正则表达式来替

换成我们希望的符号.实际上我们可以直接拿'Mustache-style这个例子来用,在app.js文件开始(在闭包内)我们只要加入

以下代码:

_.templateSettings = {
    interpolate: /{{(.+?)}}/g
};

所有这些支持一个正则表达式方法interpolate, 它允许我们使用{{property}}这个语法还替换<%= property%>

为此我们必须把所有原来的模版的标签替换成新的语法.尽管这和我们原来用的模版变化比很大, 至少我们现在可以用

Underscore了.我们对于Javascript使用<%的地方可以使用用<%-来转换数据.如果我们准备使用这些在我们的模版

里来替换interpolate属性. 我们应该也要配置Underscore里的evaluate和escape.属性.

准备Model数据

我们现在要考虑在页面初始化渲染的时候怎么样把model数据从数据库中如何取到我们的页面中来.我们能很容易的在

ASPX的类文件中加入一个简单的方法. 从数据库中读取记.创建一个对象列表. 每个对象能够表示一个联系人.我们接下

来把数据转化为Javascript数据类型并且插入到页面中.和前面四部分教程使用的模拟数据一样的格式. 我们不用改变前

端代码.作为数组的占位符,我们只要在页面的body里加入一个新的<script>标签. 直接把后台调用的代码放在app.js

引用的签名.后台代码的执行逻辑就是要从数据库取出数据列表然后序列化. 实现的方法有很多种,这些超出了本教程的范围.

我们更关注在页面初始化时如何得到这些数据.随时查看样例代码的文件是一个简单又快速的方法,但是这不是最好的做法.

在此基础上,我们必须要删除app.js里的联系人数组数据. 把页面运行在WVD或者ISS服务器上. 看看是不是和我们完成

第四部分的时候一样.

 和服务器同步应用

 在这个例子里我们用了.net4.0的asmx文件处理前端的请求.按后端看到的数据顺序发送它. 我们应该配置Backbone的

emulateHTTP和emulateJSON属性.在我们修改后的Underscore模版语法后加入下面代码:

Backbone.emulateHTTP = true;
Backbone.emulateJSON = true;

当你创建Backbone应用时你是否需要配置这些属性取决于于你你选择的后端技术是什么?看我们的应用程序编辑数据的

几种方法都实现了. 它能改变联系人的信息,能添加一个新的联系人. 还能够删除一个 已有的联系人.所有的这些前端逻辑

都有了,但是现在要从服务器调用这些方法得要修改.尽管之前页面已经做过渲染了,如果我们删除一个联系人. Backbone

还是会报一个错误,url has not been defined.原因是我们使用了destroy()方法在ContactView类的deleteContact()

方法里.来看看怎么让删除功能恢复正常.首先在model里得定义url属性.为Contact类添加url属性.

url: function () {
    return "/ContactManager.asmx/ManageContact?id=" + this.get("id");
}

我们为url属性指定一个function,返回需要请求的url.在这个例子中我们用asmx文件去处理请求.我们还要为我们的Web

方法取一个名字(ManageContact)  并且使用model的id属性作为查询参数.现在如果我们在页面上删除一个联系人就向

Web Service提交了一个请求.DELETE方法的原理是在请求的HTTP 头中重写入指定的信息.(X-HTTP-Method-Override)

值为DELETE.利用这个方法我们能让Web service知道应该对数据库做什么操作.下步我们该修改ContactView类的

saveEdits()方法. 当一个联系人编辑完后. 像下面这样使用set()方法来告诉web service.

this.model.set(formData).save();

我们所有要做仅仅是在set()后接着再调用save().save()通过sync()方法代理向服务器提交请求.像之前一般使用PUT把

model的id作为查询字符串发送给服务器.这次http头的Content-Type设置为application/x-www-form-urlencoded.

(如果我们没有配置emulateJSON属性默认是application/json)并且model数据会以表单数据的形式发送. 所以我们修改

这个设置还是很有必要的.所有这些前端的修改都在DirectoryView类的addContact()方法中.之前这个方法里有一条if语句

检查model的类型是否已经存在来判断select按钮是否需要更新.现在我们要把这条if语句改成下面这个样子:

if (_.indexOf(this.getTypes(), formData.type) === -1) {
    this.$el.find("#filter").find("select").remove().end().append(this.createSelect());
}
 
this.collection.create(formData);

我们把if语句下面的else条件删除掉使代码更加简洁.我们还删除了add()方法并且增加create()方法在原来的位置.create()

方法实际上自动的增加一个model对象到collection中.不需要我们手动创建model实例. 并且通过sync()自动向服务器发送请求.

这次我们不用去设置http头的X-HTTP-Method-Override属性. 因为我们要用的POST方法使用了RESTful接口.和save()

方法一样. create()方法的数据也是以form data形式发送给服务器.和教程开始时候服务器端处理一样. 如何服务器端请求初始

化model数据也不属于本教程的范畴.我们仅仅关注前端部分.和之前教程一样. 本教程demo有包含注释的完整web service代码,

你感兴趣的化可以下载查看.而且还包含了数据库的备份文件. 你可以回复本分得到demo里的数据.

 总结

这部分教程,我们学习了如果一些使用Backbone的sync()方法和后台通信的前端方法.我们看到Backbone通过缺省RESTful方式

请求一个指定的URL. 并且在REST的基础上通过配置和传统服务器一同工作.我们还学习了一些使用通过sync()代理和服务器通

信的方法.特别是remove(),save()和create()方法如何向服务器发送请求.我们还学习了如何使用正则表达式修改Underscore.js

模版的插入符号.联系人管理的培训现在结束了.当然我们还能为应用添加更多的功能.我们的教程已经包含用非常出色的Backbone.js

创建功能完善的应用程序的基础知识.

感谢你的阅读.

源文件下载链接: http://cdn.tutsplus.com/net/uploads/legacy/1151_bb5/demo.zip