Backbone实现简单的ListView

准备用Backbone实现一个简单的ListView，有的功能：

1.页面用模版渲染一个json数组数据（没有去请求数据库，简单的模拟）

2.绑定每个item，单击可以找到对应的model（该model即对象中包括创建时的所有属性）

 

在这里简单谈谈单页面应用（SPA）和传统的多页面（如JSP）开发的不同之处，多页面中每次得到一个列表，如果单击item去查看详情，一般都要去更具id到数据库再去找该对象，然后再新的页面中展示，其实负责渲染该列表的List中已经有该对象了，再去请求一次服务器是不是很不友好呢？在单页面中就没有这个问题，单击每个Item就可以找到该对象，然后直接渲染数据就可以了，省去了再去请求服务器。在这里只是简单的说说在做项目中的体会~

 

下面看代码吧：

$(function(){
	//创建简单的User类
	var User = Backbone.Model.extend({
	});
	//User的集合
	var UserList = Backbone.Collection.extend({
		model:User
	});
	//增加一些测试数据
	var Users = new UserList;
	Users.add([{'name':'zhangsan'},{'name':'lisi'}]);
	//ListView中的每个Item的视图
	var ItemView = Backbone.View.extend({
		tagName:'li',
		//_.template是Underscore中的方法
		template:_.template($('#itemTmpl').html()),
		// **render** is the core function that your view should override, in order
	    // to populate its element (`this.el`), with the appropriate HTML. The
	    // convention is for **render** to always return `this`.
		render: function() {
			//下面是this.el获得的源码
			/**
			if (!this.el) {
	        	var attrs = this.attributes || {};
	        	if (this.id) attrs.id = this.id;
	        	if (this.className) attrs['class'] = this.className;
	        	this.el = this.make(this.tagName, attrs);
		    }else if (_.isString(this.el)) {
		      this.el = $(this.el).get(0);
		    }
		    **/
			//可以看出this.el是通过make方法动态创建的
			//this.model接收在new的时候传入的user
			$(this.el).html(this.template(this.model.toJSON()));
			return this;//always return this
	    },
		events:{
			"click":"viewDetail"//绑定单击事件
		},
		viewDetail:function(){
			console.log(this.model.toJSON());
			alert('你选择了'+this.model.get('name'));
		}
	});
	//主视图
	var AppView = Backbone.View.extend({
		initialize:function(){
			//绑定一些事件
		},
		addAll:function(){
			//实际开发中是先从服务器load数据，然后再执行下面，因此从服务器load数据应该是
			//在该视图初始化的时候就执行，可以在初始化的时候调用fetch（）方法
			Users.each(function(user){
				console.log(user);
				//将user传入ItemView中
				var view = new ItemView({model: user});
			    $('#listView').append(view.render().el);
			});
		}
	});
	//入口
	new AppView().addAll();
});

 代码中都加了注释，很容易理解的。