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