Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

使用Backbone.js创建联系人管理应用 第五部分

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Getting to Know Backbone.js.
Build a Contacts Manager Using Backbone.js: Part 4

Chinese (Simplified) (中文(简体)) translation by Feng Huang (you can also view the original English article)

欢迎回到Backbone系列教程的创建内容查看器. 在前面四个部分我们学习了几乎包含Backbone最新版本的所有组件models,controllers,views,and routers.

在这部分教程中,我们继续让我们的应用程序连接Web服务器.这样我们就能够把Contacts的信息存储到数据库里. 我们不打算使用LocalStorage,因为这太普遍了, 有很多的Backbone教程已经都介绍过关于这方面的内容.


开始准备工作

这部分教程我们需要准备一台Web服务器还要一个数据库. 我用微软的VWD(visual web developer)做编辑器,搭配SQLServer数据库. 这些是我们要用到的. 其实,你选择什么平台都无所谓.这不重要.

安装VWD和SQLServer不在本教程的范畴. 应该很容易找到这方面的资料.

环境安装好之后,你需要创建一个数据库,包含一个表来存储数据. 数据库的列需要对应我们的model的每个属性来命名. 例如一个命名为address的列. 这个表格可以提前填充好我们系列教程中提供的样例数据.

一个我们之前没有用到的列必须要加入到表格里. 就是id来作为表的唯一键值. 为了方便使用你最好把id设为自增长型.


Backbone的同步组件

为了同服务器沟通,Backbone为我们提供了sync这个模块. 只是唯一一个我们还没有使用到的重要模块了. 理解它我们将完善Backbone.js的整个知识体系结构.

调用sync()方法可以向服务器发送一个请求. 假设这个方法是通过调用JQuery或者Zepto来执行的请求. 又假设一个RESTful接口在后台使用POST,PUT,GET,DELETE,HTTP等方法. 就像我们看到的,Backbone能够用在headers中加入预处理动作的方法来配置GET,POST方法的回调函数(我觉得应该是call back他写错了).

除了直接调用sync(),modelscollections也有方法可以用来和数据库通信. 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文件开始(在闭包内)我们只要加入以下代码:

所有这些支持一个正则表达式方法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的emulateHTTPemulateJSON属性. 在我们修改后的Underscore模版语法后加入下面代码:

当你创建Backbone应用时你是否需要配置这些属性取决于于你你选择的后端技术是什么?

看我们的应用程序编辑数据的几种方法都实现了. 它能改变联系人的信息,能添加一个新的联系人. 还能够删除一个 已有的联系人.

所有的这些前端逻辑都有了,但是现在要从服务器调用这些方法得要修改. 尽管之前页面已经做过渲染了,如果我们删除一个联系人. Backbone还是会报一个错误,url has not been defined. 原因是我们使用了destroy()方法在ContactView类的deleteContact()方法里.

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

我们为url属性指定一个function,返回需要请求的url. 在这个例子中我们用asmx文件去处理请求. 我们还要为我们的Web方法取一个名字(ManageContact)  并且使用model的id属性作为查询参数.

现在如果我们在页面上删除一个联系人就向Web Service提交了一个请求. DELETE方法的原理是在请求的HTTP 头中重写入指定的信息.(X-HTTP-Method-Override)值为DELETE. 利用这个方法我们能让我们的Web service应该对数据库做什么操作.

下步我们该修改ContactView类的saveEdits()方法. 当一个联系人编辑完后. 像下面这样使用set()方法来告诉web service.

我们所有要做仅仅是在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语句下面的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创建功能完善的应用程序的基础知识. 感谢你的阅读.

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.