Backbone系列：todo的demo

概述

todo的思想是：Model作为每个todo项的模型，而且每个todo项与一个TodoView关联（只渲染li的视图）。最后在AppView上监听整个todo的变更，触发对应的事件。

简略的demo

step1

首先我们从只有简单的添加功能的todo做起

var Todo = Backbone.Model.extend({
	// 这里不定义也可以，不过以后和Collection的create方法配合的话，需要默认的属性
	defaults: {
		title: 'todo项的标题',
		done: false
	}
});

var TodoList = Backbone.Collection.extend({
	// 用模型类覆盖！
	model: Todo
});
var todolist = new TodoList();

var TodoView = Backbone.View.extend({
	tagName: 'li',
	template: _.template($('#item-template').html()),
	render: function() {
		this.$el.html(this.template(this.model.toJSON()));
		return this;
	}
});

var AppView = Backbone.View.extend({
	el: $('#todoapp'),
	events: {
		'keypress #new-todo': 'create'
	},
	initialize: function () {
		this.input = $('#new-todo');
		// add事件的API为：'add'(model, collectoin, options)
		// 所以会自动把model实例传进方法里
		this.listenTo(this.collection, 'add', this.addOne);
	},
	create: function(e) {
		if (e.keyCode != 13 || !this.input.val()) {
			return false;
		}
		this.collection.add({
			title: this.input.val(),
			// 没有使用create方法，需要自己设置done属性
			done: false
		});
		this.input.val('');
	},
	addOne: function (todo) {
		var view = new TodoView({model: todo});
		// 这里取$el和el都可以，只是append是jquery对象或htmlElement对象的区别
		$("#todo-list").append(view.render().el);
	}
});
var app = new AppView({collection: todolist});

一共分为四个模块：对应每个todo项的模型（Todo）和视图（TodoView），用于统一储存多个todo项的集合（TodoList），以及用于监听变更的视图（AppView）

配合数据储存

Backbone自定义的Backbone.sync能将模型或集合的状态， 持续性的同步到服务器端。在这里我们用不同的持久化方案即用localStorage把数据储存到本地，我们需要做的只是在Collection中定义localStorage属性

localStorage: new Backbone.LocalStorage("todos-backbone")

然后我们就能使用create和save等方法把数据储存在本地，并且触发add事件，完成模型的新增与储存

丰富交互功能

• 模型与视图的创建：在初始化的时候，自动加载储存的todo项，并单向绑定todo项的数量与视图，关键点在AppView。demo
  • 在AppView视图初始化时，调用集合的fetch()方法加载储存的数据
  • fetch()方法获得todo的模型数据，会自动添加到集合中，并触发集合的"add"事件，渲染对应todo项的视图
  • 模型添加到集合时，也会触发"all"事件，我们可以在这里更新todo项数量统计的视图

var AppView = Backbone.View.extend({
	el: $('#todoapp'),
	statsTemplate: _.template($('#stats-template').html()),
	events: {
		'keypress #new-todo': 'create'
	},
	initialize: function () {
		this.input = $('#new-todo');
		// add事件的API为：'add'(model, collectoin, options)
		// 所以会自动把model实例传进方法里
		this.listenTo(this.collection, 'add', this.addOne);
		this.listenTo(this.collection, 'all', this.render);

		this.footer = this.$('footer');
		this.main = $('#main');

		// 自动从数据库拉取模型，然后使用set方法
		// set方法触发集合的add事件，调用addOne方法，所以内容被加载
		this.collection.fetch();
	},
	render: function () {
		// 调用集合方法，获得当前已完成和未完成todo项的数量
		var done = this.collection.getDone().length;
		var remaining = this.collection.getRemaining().length;

		if (this.collection.length) {
			this.main.show();
			this.footer.show();
			this.footer.html(this.statsTemplate({
				done: done,
				remaining: remaining
			}));
		}
		else {
			this.main.hide();
			this.footer.hide();
		}
	},
	create: function(e) {
		if (e.keyCode != 13 || !this.input.val()) {
			return false;
		}
		this.collection.add({
			title: this.input.val(),
			// 没有使用create方法，需要自己设置done属性
			done: false
		});
		this.input.val('');
	},
	addOne: function (todo) {
		var view = new TodoView({model: todo});
		// 这里取$el和el都可以，只是append是jquery对象或htmlElement对象的区别
		$("#todo-list").append(view.render().el);
	}
});

• 模型与视图的删除：监听todo项目清除和全部清除，并调用视图TodoView上的对应方法删除DOM。关键点在TodoView上事件的监听的定义。demo
  
  • 在TodoView上监听destroy按钮的点击事件，并使TodoView监听model上的destory事件
  • 点击destory时调用model的destory()方法，删除集合中的模型，并调用视图的remove方法删除DOM
  • 在AppView上监听全部删除的按钮，使用_.invoke()方法删除所有状态为已完成的todo项

var TodoView = Backbone.View.extend({
	tagName: 'li',
	template: _.template($('#item-template').html()),
	events: {
		'click .toggle': 'toggleDone',
		'click a.destroy': 'clear'
	},
	initialize: function() {
		// 但model触发destory事件时，调用视图的remove方法，从DOM中移除对应视图
		this.listenTo(this.model, 'destroy', this.remove);
	},
	render: function() {
		this.$el.html(this.template(this.model.toJSON()));
		return this;
	},
	toggleDone: function() {
		// 因为在实例化app的时候，已经把todo传进来作为这个view的model
		this.model.toggle();
	},
	clear: function() {
		this.model.destroy();
	}
});

• 模型与视图的更新：在更新model后，使用save方法就能更新模型。demo
  • 在TodoView中绑定双击事件，在双击后允许更改内容
  • 在失焦后更新模型

var Router = Backbone.Router.extend({
    routes: {
        '*filter': 'setFilter'
    },
    setFilter: function(param) {
        state = param || '';
        todolist.trigger('filter');
    }
});
var router = new Router();
Backbone.history.start();

• 在路由上监听，并触发collection的filter事件，view监听collection的事件并更新视图demo