用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