Backbone.js的集合

此源代码来自《JavaScript快速全栈开发》中，经过网络其他的学习掺杂整理出的代码。

接下来会创建一个水果数据库，也就是Rest API的替代品，它会提供给我们水果的名字和图像URL（数据模型）

Rest API指一组架构约束条件和原则，满足约束条件和原则的应用程序设计。（用固定的URI和可变的参数访问某个服务，来完成一系列的业务请求）

接下来写一个小例子，步骤：

（1）先引入三个库文件（JQuery.js、Underscore.js、Backbone.js）,第一篇Backbone.js的文章中有下载地址和版本号

（2）准备一个img文件夹存放两张图片，分别叫（watermelon.jpg和orange.jpg）

（3）再写一段js，具体介绍在代码上

<script>
		//准备一些数据，会提供名称和图像的URL
		var fruitData = [{name:"watermelon",url:"img/watermelon.jpg"},{name:"orange",url:"img/orange.jpg"}];
		var app;
		var router = Backbone.Router.extend({
			routes:{
				"":'fruit',
				//用户浏览index.html#collectionType/名称时即可看到存储的某一个信息。
				//这个信息由Backbone Router里定义的loadCollection函数获取和渲染
				'collectionType/:collectionName':'loadCollection'
			},
			//创建Bacckbone Colelction使它和fruitData变量绑定，把集合传递给fruitView及collectionView
			initialize:function(){
				var collectionType = new CollectionType();
				collectionType.reset(fruitData);
				this.fruitView = new fruitView({collection:collectionType});
				this.collectionView = new collectionView({collection:collectionType});
			},
			fruit:function(){
				this.fruitView.render();
			},
			loadCollection:function(collectionName){
				this.collectionView.render(collectionName);
			}
		});
		//让fruitView可以使用整个数据库。
		//现在只是把数据以JSON字符串的形式展示在浏览器中
		var fruitView = Backbone.View.extend({
			el:'body',
			template:_.template('Fruit Data:<%=data%>'),
			render:function(){
				this.$el.html(this.template({data:JSON.stringify(this.collection.models)}));
			}
		});
		//CollectionType的Backbone Collection非常干净
		var CollectionType = Backbone.Collection.extend({});
		//Fruit的视图只包含两个属性template和render
		var collectionView = Backbone.View.extend({
			//为了让Underscore.js模板引擎可以更好的处理这个任务，需要给figure、img、figcaption标签展示特定的值
			//为了保证阅读性，使用反斜杠作为结束符，或+来连接字符串
			template:_.template('<figure>\<img src="<%=attributes.url%>"/>\<figcaption><%=attributes.name%></figcaption>\<figure>'),
			render:function(collectionName){
				//用where方法和[]选择第一个元素作为模型
				var fruitModel = this.collection.where({name:collectionName})[0];
				var fruitHtml = this.template(fruitModel);
				$('body').html(fruitHtml);
			}
		});
		$(document).ready(function(){
			app = new router;
			Backbone.history.start();
		})
  </script>

（4）具体实现效果：

a.在网页中可以看到用JSON展示的数据字符串

b.用index.html/#collectionType/orange即可看到对应存储的图片。

源代码免费提供给大家，希望大家一起交流学习。感谢。http://download.csdn.net/detail/miss_ll/9698699