Utilisez Backbone.js pour créer un exemple de code pour ajouter, supprimer, modifier et rechercher des tables

Backbone.js est un framework de développement Web lourd. Il s'agit d'un framework js basé sur jquery et underscore. Il se compose principalement de trois parties : modèle, collection et vue.
1.Modèle : créez un modèle pour représenter l'objet de données, effectuez une vérification des données, détruisez l'objet ou enregistrez-le sur le serveur.
2.Collection : il s'agit d'une collection de modèles qui peuvent ajouter ou supprimer des éléments, ainsi que certaines opérations pratiques.
3. Vue : vous pouvez lier des modèles et des événements HTML, vous pouvez restituer des modèles ou des collections sur la page et vous pouvez restituer la page en écoutant des événements tels que des modifications ou une destruction de modèle.
L'avantage de Backbone est qu'il sépare bien les données et l'interface, et sépare la liaison des événements, ce qui facilite la gestion et l'itération, rendant la modularisation de Javascript plus claire. Backbone est plus adapté aux situations où il y a une grande quantité de données sur la page, ce qui facilite la communication d'informations complexes au sein de la page.

Ci-dessous, j'ai utilisé Backbone pour écrire un tableau permettant d'ajouter, de supprimer, de modifier et de vérifier, en me référant à l'exemple Todos sur le site officiel de Backbone. Backbone.js lui-même s'appuie sur jquery et le trait de soulignement. Pour le stockage des données, j'ai utilisé backbone-localstorage.js pour stocker les données dans une base de données locale. J'ai publié le code js principal. De nombreuses méthodes et événements jquery, underscore et backbone sont utilisés, veuillez vous référer aux documents pertinents.

$(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;
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!