Backbone TodoMVC 源码分析

<span style="font-size:18px;">$(function () {
// 创建model
var Todo = Backbone.Model.extend({
// 设置默认属性
defaults: function () {
return {
title: "empty todo...",
order: Todos.nextOrder(),// 为什么这里能取到Todos?
done: false
}
},

// 设置默认方法，每个model都有的方法，所以卸载model中
// 切换完成状态
toggle: function () {
this.save({
done: !this.get("done")
})
}
});

// 创建Collection
var TodoList = Backbone.Collection.extend({
model: Todo,
// 设置localStorage存储位置
localStorage: new Backbone.LocalStorage("todo-backbone"),
// 已完成
done: function () {
return this.where({
done: true
})
},
// 未完成
remaining: function () {
return this.where({
done: false
})
},
// 下一条的索引
nextOrder: function () {
if (!this.length) {
return 1;
}
return this.last().getOrder() + 1;
},
// 按照order排序
comparator: order
});
// 实例化Collection
var Todos = new TodoList;

// 创建itemView
var TodoView = Backbone.View.extend({
// 指定临时生成标签名
tagName: "li",
// 编译模板
template: _.template($('#item-template').html()),
// 绑定事件
events: {
"click .toggle": "toggleDone",
"dblclick .view": "edit",
"click a.destroy": "clear",
"keypress .edit": "updateOnEnter",
"blur .edit": "close"
},
// 初始化
initialize: function () {
// 绑定模型及事件回调
this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'destroy', this.remove);
},
// 渲染
render: function () {
// 用模版渲染视图
this.$el.html(this.template(this.model.toJSON()));
this.$el.toggleClass('done', this.model.get('done'));
this.input = this.$('.edit');
return this;
},
// 切换完成状态
toggleDone: function () {
this.model.toggle();
},
// 进入编辑模式
edit: function () {
this.$el.addClass("editing");
this.input.focus();
},
// close的处理逻辑
close: function () {
var value = this.input.val();
// 如果值为空，clear，否则保存
if (!value) {
this.clear()
} else {
this.model.save({
title: value
});
this.$el.removeClass("editing");
}
},
clear: function () {
this.model.destroy();
},
updateOnEnter: function (e) {
if (e.keyCode == 13) {
this.close();
}
}
});
var AppView = Backbone.View.extend({
el: $("#todoapp"),
statsTemplate: _.template($('#stats-template').html()),
events: {
"keypress #new-todo": "createOnEnter",
"click #clear-completed": "clearCompleted",
"click #toggle-all": "toggleAllComplete"
},
initialize: function () {
this.input = this.$("#new-todo");
this.allCheckbox = this.$("#toggle-all")[0];

this.listenTo(Todos, 'add', this.addOne);
this.listenTo(Todos, 'reset', this.addAll);
this.listenTo(Todos, 'destroy', this.render);

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

Todos.fetch();
},
render: function () {
var done = Todos.done().length;
var remaining = Todos.remaining().length;

if (Todos.length) {
this.main.show();
this.footer.show();
this.footer.html(statsTemplate({
done: done,
remaining: remaining
}));
} else {
this.main.hide();
this.footer.hide();
}
this.allCheckbox.checked = !remaining;
},
addOne: function (todo) {
var view = new TodoView({
model: todo
});
this.$("#todo-list").append(view.render().el);
},
addAll: function () {
Todos.each(this.addOne, this)
},
createOnEnter: function (e) {
if (e.keyCode != 13) {
return;
}
if (!this.input.val()) {
return;
}
Todos.create({
title: this.input.val()
})
this.input.val('');
},
toggleAllComplete: function () {
var done = this.allcheckbox.checked;
Todos.each(function (todo) {
todo.save({
'done': done
})
})
}
});
// 实例化AppView，入口
var App = new AppView;
});</span>

model：

    1.defaults：设置默认属性，要return出去

    2.自定义方法

collection：

    1.绑定model

    2.设置存储位置

    3.自定义方法 this.where({})

    4.排列顺序

    5.实例化

View：

    1.绑定DOM元素

    2.模版

    3.绑定事件

    4.initialize，初始化时执行

    5.render，不自动执行，要手动调用

    6.自定义方法

    7.实例化