基于Zend Framework 2、Require.js和Backbone.js的RESTful架构Demo

这是将Zend Framework 2官方Album的Demo改成一个客户端基于Require.js和Backbone.js,服务端基于Zend Framework 2的一个RESTful架构的Demo。

本程序将Album demo中的CRUD功能改成了一个名为AlbumRestApiController的controller提供RESTful API,这个AlbumRestApiController继承了ZF2提供的AbstractRestfulController,它可以根据HTTP请求的method:POST,GET,PUT和DELETE来自动分发请求至CRUD的action。

在前端使用Require.js来管理js的文件,用Backbone.js来实现MVC、路由分发的功能和路由欺骗的功能,js的主要程序在/public/js/application中。

建议使用谷歌Chrome当打开应用,需要配置虚拟主机,访问http://your-domain/album-rest,在页面的header里会发现一个播放器,这个播放器是用来测试页面是否有刷新的,在播放音乐的时候对页面进行操作跳转,如果URL改变了页面也改变了但音乐没有停止播放说明程序是实现了我想要的概念——网站即应用,所有的AJAX数据请求都是访问上面提到的RESTful API,做到了URI即资源。

程序的git地址:http://git.oschina.net/tonitech/RESTful-Zend-Framework-2-Demo 。

由于github服务器在国外,其下载上传速度跟开源中国提供的git库是没法比的,所以我选择了开源中国的代码托管。

本程序是本人用于学习Zend Framework 2、Require.js和Backbone.js以及RESTful概念使用,欢迎各位同仁批评指正,Fork和Star点赞!谢谢!

使用Underscore.js的template将Backbone.js的js代码和html代码分离

这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去,这似乎不是一件非常好的事情,因为将js代码和html代码融合到一起会增加代码的维护难度,而且这个过程中考虑到性能的因素,需要将HTML代码放到一个数组中,最后进行拼接,代码写起来比较麻烦。我看到他们的代码之后就在考虑是否有一种类似php模板引擎的东西可以将Collection传递进去然后渲染。

我查阅了Backbone.js的手册http://backbonejs.org/#View-template ,里面有一段文字:

However, we suggest choosing a nice JavaScript templating library. Mustache.js, Haml-js, and Eco are all fine alternatives. Because Underscore.js is already on the page, _.template is available, and is an excellent choice if you prefer simple interpolated-JavaScript style templates.

Whatever templating strategy you end up with, it’s nice if you never have to put strings of HTML in your JavaScript.

它建议我们使用js的模板库,而刚好Backbone.js强依赖于Underscore.js所以Underscore.js已经被引入了,它提供了一个_.template方法,这个方法支持使用内嵌js代码的html模板代码,在js代码里没有出现HTML代码是一件非常nice的事情!这正符合了我们MVC的思想,前端的HTML代码也便于维护,要不然就真的成为意大利面条式代码了!

关于Underscore.js的template的说明在http://underscorejs.org/#template ,这里有教你怎么使用。

Template functions can both interpolate variables, using <%= … %>, as well as execute arbitrary JavaScript code, with <% … %>. If you wish to interpolate a value, and have it be HTML-escaped, use <%- … %>

上面这段文字告诉我们在这个模板的代码里面js内嵌代码的标签如何使用,接下来我举一个例子:

我们先建一个template,位于:template/album/index.html

<%
var title = 'My albums';
document.title = title;
%>
<h1><%= title %></h1>
<p>
    <a href="album-rest/add">Add new album</a>
</p>
<table class="table">
<thead>
    <tr>
        <th>Title</th>
        <th>Artist</th>
        <th> </th>
    </tr>
</thead>
<tbody id="album-list">
<% _.each(albums, function(album) { %>
<tr class="album-row">
    <td><%= album.get('title') %></td>
    <td><%= album.get('artist') %></td>
    <td>
        <a href="album-rest/edit/<%= album.get('id') %>">Edit</a>
        <a href="album-rest/delete/<%= album.get('id') %>">Delete</a>
    </td>
</tr>
<% }); %>
</tbody>
</table>

下面的这个代码片段是定义了一个Backbone的View,sync属性会去请求服务端获取获取所有album的数据,最后将数据存放到albumList这个Collection里面。随后执行render方法,在render里面this.template = _.template(AlbumTpl, albums);这句代码就是用来完成数据和模板混合的工作的,AlbumTpl来自template/album/index.html,另外必须要将Collection中的所有的model以数组的形式获取到赋给albums,除非你在模板里面又进行了对Collection的解析操作,否则不能只传入一个Collection,因为Underscore.js的template是无法识别Backbone.js的Collection的对象结构的。

define(["model/album", "collection/album-list", "text", 'text!template/album/index.html'], function(Album, AlbumList, text, AlbumTpl) {
	var IndexView = Backbone.View.extend({
		model : Album,
		initialize: function() {
		},
		sync : function (render) {
			var albumList = new AlbumList;
			var view = this;
			Backbone.sync('read', albumList, {
				success : function (result) {
					albumList.add(result.ret);
					view.collection = albumList;
					view.render();
				}
			});
		},
		render: function() {
			albumList = this.collection;
			albums = albumList.models;
			console.log(_.template(AlbumTpl, albums));
			this.template = _.template(AlbumTpl, albums);
			$("#page-wrapper").html(this.template);
		}
	});
	return IndexView;
});

通过上面的操作,就可以实现js代码和html代码分离了。