使用Backbone.js建立一個增刪改查表的實例程式碼

Backbone.js是一套重量級的web開發框架，它是基於jquery和underscore的一個js框架,主要由三個部分組成：Model,Collection,View。
1.Model：建立模型來表示資料對象，可以進行資料驗證，將對象銷毀或儲存到伺服器上。
2.Collection：是Model的集合，可以增加或刪除元素，以及一些方便的操作。
3.View：可以綁定html模板和事件，可以將模型或集合渲染到頁面上，可以透過監聽模型改變或銷毀等事件重新渲染頁面。
Backbone的優點在於將資料和介面很好的分開來，將事件的綁定很好的剝離出來，便於管理和迭代，使得Javascript的模組化更加清晰。 Backbone比​​較適合頁面上有大量資料的情況，是頁面內複雜的資訊溝通較清楚。

下面我用Backbone寫了一個增刪改查的表格，參考了Backbone官網Todos的例子。 Backbone.js本身依賴jquery和underscore，資料儲存我用到了backbone-localstorage.js，將資料儲存在本地資料庫中，我把主要的js程式碼貼出來。其中用到了許多jquery,underscore和backbone的方法和事件，請參考相關文件。

$(function(){

	//Model:表示一个学生
	var Student=Backbone.Model.extend({
		//默认值
		defaults:function(){
			return{
				name:"XXX",
				age:"0",
				selected:false,
				id:Students.nextId(),
			};
		},
		
		//初始化的时候判断，如果设置的属性值非法就设为默认值
		initialize:function(){
			if(!this.get("name")){
				this.set({"name":this.defaults().name});
			}
			if(!this.get("age")||!(/(^[1-9]\d*$)/.test(this.get("age")))){
				this.set({"age":this.defaults().age});
			}
		},

		//标记该学生是否被选中
		toggle:function(){
			this.save({selected:!this.get("selected")});
		}
	});

	//Collection:Model的集合，即所有学生的集合
	var Students=Backbone.Collection.extend({
		
		model:Student,
		
		//本地数据库，用到backbone-localstorage.js
		localStorage:new Backbone.LocalStorage("Students-Table"),

		//返回被选中的学生的集合
		selected:function(){
			return this.filter(function(student){return student.get('selected');});
		},

		//给每个学生一个编号
		nextId:function(){
			if(!this.length)
				return 1;
			return this.last().get('id')+1;
		}
	});

	//定义一个学生集合对象
	var Students=new Students;


	//View:这个视图表示table中的一列，即一个学生，对应一个Model
	var StudentView=Backbone.View.extend({
		//表示<tr></tr>元素
		tagName:"tr",
		
		//将相应模板写入template属性中，_.template()为underscore.js中的方法
		template:_.template($(&#39;#item-template&#39;).html()),

		//绑定该tr下的事件
		events:{
			"click .toggle":"toggleSelect",
			"dblclick td":"edit",
			"click a.destroy":"clear",
			"blur .edit":"close"
		},

		//初始化该View，listenTo监听model的事件
		initialize:function(){
			//model发生变化就重新渲染视图
			this.listenTo(this.model,&#39;change&#39;,this.render);
			//销毁model
			this.listenTo(this.model,&#39;destroy&#39;,this.remove);
		},

		//this.$el为该tr节点元素，将template渲染进该节点，并把model的值写入
		render:function(){
			this.$el.html(this.template(this.model.toJSON()));
			//如果该行被选中，则切换样式
			this.$el.toggleClass(&#39;selected&#39;,this.model.get(&#39;selected&#39;));
			return this;
		},

		//判断该行是否被选中，对应model中的selected属性
		toggleSelect:function(){
			this.model.toggle();
		},

		//双击td将样式变为可编辑
		edit:function(e){
			$(e.currentTarget).addClass("editing").find("input,select").focus();
		},

		//编辑状态下失去焦点，则修改完成
		close:function(e){
			var input=$(e.currentTarget);

			if(input.attr(&#39;name&#39;)=="name"){
				if(!input.val()){
					input.val(this.model.defaults().name);
				}
				this.model.save({"name":input.val()});
			}else if(input.attr(&#39;name&#39;)=="gender"){
				this.model.save({"gender":input.val()});
			}else{
				if(!input.val()||!(/(^[1-9]\d*$)/.test(input.val()))){
					input.val(this.model.defaults().age);
				}
				this.model.save({"age":input.val()});
			}
			input.parent().removeClass("editing");
		},

		//删除该行的时候删除相应model
		clear:function(){
			this.model.destroy();
		}
	});


	//View:这个视图表示$("#content")，用来表现整个学生表格
	var AppView=Backbone.View.extend({
		el:$("#content"),

		//右下角删除学生数目的模板
		statsTemplate:_.template($(&#39;#stats-template&#39;).html()),

		events:{
			"click #add-student":"addNewStudent",
			"click #clear-selected":"clearSelected",
			"click #select-all":"selectAll"
		},

		initialize:function(){
			this.allCheckbox=$("#select-all");
			this.main=$("#main");
			this.footer=$(&#39;footer&#39;);
			this.name=$("#new-name");
			this.age=$("#new-age");
			this.gender=$("#new-gender");

			//Collection中增加一个Model就触发add事件
			this.listenTo(Students,&#39;add&#39;,this.addOne);
			//一旦调用fetch方法就触法reset事件
			this.listenTo(Students,&#39;reset&#39;,this.addAll);
			//all事件表示该View下的所有事件，即触法任意事件就触法all事件
			this.listenTo(Students,&#39;all&#39;,this.render);

			//从本地数据库中获取所有学生
			Students.fetch();
		},

		//渲染视图
		render:function(){
			var selected=Students.selected().length;
			
			if(Students.length){
				this.main.show();
				this.footer.show();
				this.footer.html(this.statsTemplate({selected:selected}));
			}else{
				this.main.hide();
				this.footer.hide();
			}
			//判断所有学生是否被选中
			this.allCheckbox.attr("checked",selected==Students.length?true:false);
		},

		//增加一个学生，同时将model传入StudentView中
		addOne:function(student){
			var view=new StudentView({model:student});
			//将渲染后的每一列添加到表格中
			this.$("#student-list").append(view.render().el);
		},

		//增加所有学生，通过Collection.each依次调用addOne方法
		addAll:function(){
			Students.each(this.addOne,this);
		},

		//增加一个新学生
		addNewStudent:function(){
			Students.create({name:this.name.val(),gender:this.gender.val(),age:this.age.val()});
			this.name.val(&#39;&#39;);
			this.age.val(&#39;&#39;);
			this.gender.val(1);
		},

		//删除选中列，_.invoke(集合,方法)
		clearSelected:function(){
			_.invoke(Students.selected(),&#39;destroy&#39;);
		},

		//选中所有
		selectAll:function(){
			var selected=this.allCheckbox.attr(&#39;checked&#39;)=="checked";
			Students.each(function(student){
				student.save({&#39;selected&#39;:selected});
			});
		}
	});

	//创建View
	var App=new AppView;
});

以上是使用Backbone.js建立一個增刪改查表的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！