backbone库的结构：
http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html
本文所有例子来自于http://blog.csdn.net/eagle_110119/article/details/8842007
1.1 collection结构
var Collection = Backbone.Collection = function(models, options){}
var setOptions = {add: true, remove: true, merge: true};
var addOptions = {add: true, remove: false};
_.extend(Collection.prototype, Events,{})
var methods = [];
_.each(methods, function(method){})
var attributeMethods = ['groupBy', 'countBy', 'sortBy'];
_.each(attributeMethods, function(method){})先看第一个例子1.1.1
// 定义模型类
var Book = Backbone.Model.extend({
defaults : {
name : ''
}
}); // 定义集合类
var BookList = Backbone.Collection.extend({
model : Book
}); // 创建一系列模型对象
var book1 = new Book({
name : 'Effective Java中文版(第2版)'
});
var book2 = new Book({
name : 'JAVA核心技术卷II：高级特性（原书第8版）'
});
var book3 = new Book({
name : '精通Hibernate：Java对象持久化技术详解（第2版）'
}); // 创建集合对象
var books = new BookList([book1, book2, book3]);
先看第一部分1.1.1-1
// 定义集合类
var BookList = Backbone.Collection.extend({
model : Book
});
找到Backbone.Collection.extend()方法
Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;
var Collection = Backbone.Collection = function(models, options) {}
extend方法
var extend = function(protoProps, staticProps) {//第一个参数传入子类原型上，第二个参数传入子类构造器中
var parent = this;
var child;
// The constructor function for the new subclass is either defined by you
// (the "constructor" property in your `extend` definition), or defaulted
// by us to simply call the parent's constructor.
if (protoProps && _.has(protoProps, 'constructor')) {//检查protoProps是否拥有constructor属性(不考虑原型上)
child = protoProps.constructor;
} else {
child = function(){ return parent.apply(this, arguments); };//借用构造器，this指向model构造器,让子类实例化时，可以获取父类构造器的成员
}
// Add static properties to the constructor function, if supplied.
_.extend(child, parent, staticProps);//将父类和staticProps上的属性成员统统传给child的构造器上
// Set the prototype chain to inherit from `parent`, without calling
// `parent`'s constructor function.
var Surrogate = function(){ this.constructor = child; };
Surrogate.prototype = parent.prototype;
child.prototype = new Surrogate;//临时构造器的方式完成继承，Surrogate属于中间件，子类实例修改不会影响父类原型，可以让子类实例获取父类原型上的成员
// Add prototype properties (instance properties) to the subclass,
// if supplied.
if (protoProps) _.extend(child.prototype, protoProps);//将自定义信息绑定到子类原型上
// Set a convenience property in case the parent's prototype is needed
// later.
child.__super__ = parent.prototype; //_super_属性方便子类直接访问父类原型
return child; //返回子类构造器
};跟Backbone.model.extend一样，这里就不过多解释了。例子中的{model:Book}将被绑定到Collection的原型上，实例化Collection后，即可调用。
继续看例子1.1.1-2
// 创建集合对象
var books = new BookList([book1]);
我们不用之前的例子，我先来个简单的。
看一下构造器
var Collection = Backbone.Collection = function(models, options) {
options || (options = {});
if (options.model) this.model = options.model;
if (options.comparator !== void 0) this.comparator = options.comparator;
this._reset();//原型上的_reset方法，第一次初始化，以后就是重置
this.initialize.apply(this, arguments);//空的init方法，用的时候，可以自己修改
if (models) this.reset(models, _.extend({silent: true}, options));
};实例化时，有三个方法，分别是_reset，initialize和reset三个方法。先看_reset方法
// 重置
_reset: function() {
this.length = 0;
this.models = [];
this._byId = {};
}
算是重置，也算是初始化。
initialize方法
initialize: function(){}用的时候，需要我们自己去定义。
最后看一下reset方法
reset: function(models, options) {
options || (options = {});
for (var i = 0, l = this.models.length; i < l; i++) {
this._removeReference(this.models[i]);
}
options.previousModels = this.models;
this._reset();//重置
this.add(models, _.extend({silent: true}, options));
if (!options.silent) this.trigger('reset', this, options);
return this;
},reset这个方法关联到两个方法_removeReference和add方法。
先看下_removeReference方法
_removeReference: function(model) {
if (this === model.collection) delete model.collection;
model.off('all', this._onModelEvent, this);
}如果this.models存在model实例，这个方法主要是实现清除工作，删除掉model的collection属性(后面会提)，去掉绑定的事件。
再看一下add方法
add: function(models, options) {
return this.set(models, _.extend({merge: false}, options, addOptions));
}这里给出addOptions的初始值：
var addOptions = {add: true, remove: false};进入set方法
set: function(models, options) {
options = _.defaults({}, options, setOptions);//如果options的某个参数名对应的参数值为空，则将setOptions对应参数名的参数值赋给它
if (options.parse) models = this.parse(models, options);//没重写之前，只返回models
if (!_.isArray(models)) models = models ? [models] : [];//转成数组
var i, l, model, attrs, existing, sort;
var at = options.at;
var sortable = this.comparator && (at == null) && options.sort !== false;
var sortAttr = _.isString(this.comparator) ? this.comparator : null;
var toAdd = [], toRemove = [], modelMap = {};
var add = options.add, merge = options.merge, remove = options.remove;//默认情况 true false false
var order = !sortable && add && remove ? [] : false;
// Turn bare objects into model references, and prevent invalid models
// from being added.
for (i = 0, l = models.length; i < l; i++) {
if (!(model = this._prepareModel(attrs = models[i], options))) continue;//主要是将Model实例绑定上collection属性
// If a duplicate is found, prevent it from being added and
// optionally merge it into the existing model.
if (existing = this.get(model)) { //对象队列，在初始化没有任何信息
if (remove) modelMap[existing.cid] = true;
if (merge) {
attrs = attrs === model ? model.attributes : options._attrs;
existing.set(attrs, options);
if (sortable && !sort && existing.hasChanged(sortAttr)) sort = true;
}
// This is a new model, push it to the `toAdd` list.
} else if (add) {
toAdd.push(model);//将model实例推进数组中，保存
// Listen to added models' events, and index models for lookup by
// `id` and by `cid`.
model.on('all', this._onModelEvent, this);//绑定all事件，这样是执行两遍all事件
this._byId[model.cid] = model;//用cid与对应的mode实例关联
if (model.id != null) this._byId[model.id] = model;//有id的话，再用id与对应的model实例关联
}
if (order) order.push(existing || model);//初始化时order为false
delete options._attrs;
}
// Remove nonexistent models if appropriate.
if (remove) {//初始化时remove为false
for (i = 0, l = this.length; i < l; ++i) {
if (!modelMap[(model = this.models[i]).cid]) toRemove.push(model);
}
if (toRemove.length) this.remove(toRemove, options);
}
// See if sorting is needed, update `length` and splice in new models.
if (toAdd.length || (order && order.length)) {
if (sortable) sort = true;
this.length += toAdd.length;//length保存model实例的个数
if (at != null) {
splice.apply(this.models, [at, 0].concat(toAdd));
} else {
if (order) this.models.length = 0;
push.apply(this.models, order || toAdd);//实例上创建models属性，存放toAdd
}
}
// Silently sort the collection if appropriate.
if (sort) this.sort({silent: true});//默认sort为false
if (options.silent) return this;
// Trigger `add` events.
for (i = 0, l = toAdd.length; i < l; i++) {
(model = toAdd[i]).trigger('add', model, this, options);
}
// Trigger `sort` if the collection was sorted.
if (sort || (order && order.length)) this.trigger('sort', this, options);
return this;
}重要的部分在for循环这块，详细看一下for部分
for (i = 0, l = models.length; i < l; i++) {
if (!(model = this._prepareModel(attrs = models[i], options))) continue;//主要是将Model实例绑定上collection属性
// If a duplicate is found, prevent it from being added and
// optionally merge it into the existing model.
if (existing = this.get(model)) { //对象队列，在初始化没有任何信息
if (remove) modelMap[existing.cid] = true;
if (merge) {
attrs = attrs === model ? model.attributes : options._attrs;
existing.set(attrs, options);
if (sortable && !sort && existing.hasChanged(sortAttr)) sort = true;
}
// This is a new model, push it to the `toAdd` list.
} else if (add) {
toAdd.push(model);//将model实例推进数组中，保存
// Listen to added models' events, and index models for lookup by
// `id` and by `cid`.
model.on('all', this._onModelEvent, this);//绑定all事件，这样是执行两遍all事件
this._byId[model.cid] = model;//用cid与对应的mode实例关联
if (model.id != null) this._byId[model.id] = model;//有id的话，再用id与对应的model实例关联
}
if (order) order.push(existing || model);//初始化时order为false
delete options._attrs;
}先看一下this._prepareModel方法
_prepareModel: function(attrs, options) {
//这里判断attrs，如果是Model创建的，那直接在attrs上加上collection即可
if (attrs instanceof Model) {//instanceof 能在实例的原型对象链中找到该构造函数的prototype属性所指向的原型对象,attrs实际上通过Model构造器new出来的
if (!attrs.collection) attrs.collection = this;//让实例的collection保存Collection的n实例化对象
return attrs;
}
//如果不是，那系统会自动实例化一次，并为Model实例绑上collection属性
options || (options = {});
options.collection = this;
//在options中也加入这个属性,这里为什么要在options里面加入该属性，其实是因为this的问题，此时this是Collection的实例，
//一旦new过Model后，Model里的this就是model了，这里设置options.collection主要是让其传入Model中，实例化的时候，便于绑定，这样model实例也拥有collection属性
var model = new this.model(attrs, options);//调用model的构造器，实例化对象 根据具体信息创建model实例
if (!model.validationError) return model;
this.trigger('invalid', this, attrs, options);//触发invalid事件
return false;//返回不是Model实例
}if后面的continue，表示代码始终往下走，实例化对Model对象，为每个实例化对象添加collection属性。
再看一下get方法
get: function(obj) {
if (obj == null) return void 0;
return this._byId[obj.id] || this._byId[obj.cid] || this._byId[obj];
}因为this._byId在_reset方法中初始化中是空对象，默认get取出undefined，将加工好的每个model实例放入toAdd数组中，为所有model绑定all事件，触发函数是this._onModeEvent()，最后用cid与每个对应的model实例关联。
ok，回到reset方法
if (!options.silent) this.trigger('reset', this, options);因为_.extend({silent: true}, options)，这个reset事件没有触发。返回this，以上完成collection的实例化。
1.2 往collection添加model
集合提供了3个方法允许我们动态地向集合中动态插入模型：
add()：向集合中的指定位置插入模型，如果没有指定位置，默认追加到集合尾部
push()：将模型追加到集合尾部（与add方法的实现相同）
unshift()：将模型插入到集合头部
1.2.1 add
先看下例子1.2.1-1：
var Book = Backbone.Model.extend({
defaults : {
name : '',
price : 0
}
});
// 创建集合对象
var books = new Backbone.Collection(null, {
model : Book
});
books.add({
name : '构建高性能Web站点',
price : 56.30
});注意这个collection实例化的方式，它传入的参数是null和{model:Book}，和之前的定义比较一下
var books = new Backbone.Collection(null, {
model : Book
});
var BookList = Backbone.Collection.extend({
model : Book
});collection需要有一个与之关联的model，这两种方式都可以将model与collection关联，这里有疑问为什么一定要呢？原因在这(_prepareModel方法中)
var model = new this.model(attrs, options);//调用model的构造器，实例化对象
如果不将model与collection相互关联这个this.model将没有值，上述的两种方法都可以是现实this.model指向Model构造器。
看一下add方法
add: function(models, options) {
return this.set(models, _.extend({merge: false}, options, addOptions));
}之前将实例化collection的时候描述过了将add的信息传入set方法中。我们看一下最后一部分的set代码：
if (sort) this.sort({silent: true});//默认sort为false
if (options.silent) return this;
// Trigger `add` events.
for (i = 0, l = toAdd.length; i < l; i++) {//处理toAdd数组的model实例
(model = toAdd[i]).trigger('add', model, this, options);//触发add事件
}
// Trigger `sort` if the collection was sorted.
if (sort || (order && order.length)) this.trigger('sort', this, options);
return this;添加会触发add的监听事件。这个事件需要你自己定义，事件名为add。库会在这个时候从toAdd中依次取model实例来触发add事件。
add执行添加部分的代码
if (order) this.models.length = 0;
push.apply(this.models, order || toAdd);//实例上创建models属性，存放toAdd。原型add所走的
1.2.2 push
例子1.2.2-1：(跟1.2.1-1差不多)
books.push({
name : '深入分析Java Web技术内幕',
price : 51.80
});看一下原型上的push方法
push: function(model, options) {
model = this._prepareModel(model, options);
this.add(model, _.extend({at: this.length}, options));
return model;
}push方法调用了add和_prepareModel方法，这里我们大概总结下，_prepareModel的作用
_prepareModel：主要将你传入的对象类似{name:xxx,price:xxxx}的形式，制作成Model的实例，这里我们需要强调一点就是，你可以将这些对象先传入Model的构造器生成model实例，再传入collection里来，也可以将这些对象直接传入collection中，collection会检测这写对象是否为Model的实例，如果不是会调用Model构造器，根据这个信息生成Model的实例。最后为每一个model添加collection属性
1.2.3 unshift
先上例子
books.unshift({
name : '编写高质量代码:Web前端开发修炼之道',
price : 36.80
});看一下unshift方法
unshift: function(model, options) {
model = this._prepareModel(model, options);
this.add(model, _.extend({at: 0}, options));//注意这个at的值，这个值会影响插入的顺序
return model;//返回插入的model实例
}at值的影响在set方法中的体现在这：
if (at != null) {
splice.apply(this.models, [at, 0].concat(toAdd));//使用splice方法完成插入，因为apply的参数需要一个数组，at值将决定在哪插入
} else {
if (order) this.models.length = 0;
push.apply(this.models, order || toAdd);//实例上创建models属性，存放toAdd
}可以清楚的看到当我们使用unshift时，传入的at为0，也就是在数组的第一个位置插入，刚才的push则是传递的this.length,这个this.length哪里定义的，就在set方法中
this.length += toAdd.length;//length保存model实例的个数
这样push操作，就是在数组的最后一位插入。而add底层就是数组的原生push，也是在最后添加。
1.3 从collection中删除model
集合类提供了3个方法用于从集合中移除模型对象，分别是：
remove()：从集合中移除一个或多个指定的模型对象
pop()：移除集合尾部的一个模型对象
shift()：移除集合头部的一个模型对象
1.3.1 remove
先看下例子1.3.1-1
// 定义模型类
var Book = Backbone.Model.extend({
defaults : {
name : '',
price : 0
}
}); // 定义初始化数据
var data = [{
name : '构建高性能Web站点',
price : 56.30
}, {
name : '深入分析Java Web技术内幕',
price : 51.80
}, {
name : '编写高质量代码:Web前端开发修炼之道',
price : 36.80
}, {
name : '基于MVC的JavaScript Web富应用开发',
price : 42.50
}, {
name : 'RESTful Web Services Cookbook中文版',
price : 44.30 }] // 创建集合对象
var books = new Backbone.Collection(data, {
model : Book
}); books.remove(books.models[2]);
books.pop();
books.shift(); // 在控制台输出集合中的模型列表
console.dir(books.models);
先看remove方法。
remove: function(models, options) {
//console.log(models);
//console.log(options);
models = _.isArray(models) ? models.slice() : [models];//将models这个类数组集合转成数组
options || (options = {});
var i, l, index, model;
for (i = 0, l = models.length; i < l; i++) {
model = this.get(models[i]);//根据cid取到该对象
if (!model) continue;
delete this._byId[model.id];//删除id关联的信息
delete this._byId[model.cid];//删除cid关联的信息
index = this.indexOf(model);//返回要删除Model所在的位置
this.models.splice(index, 1);//获取该位置删除该Model实例
this.length--;//长度减一
if (!options.silent) {//如果设置了silent属性，将不执行remove回调。
options.index = index;
model.trigger('remove', model, this, options);
}
this._removeReference(model);//删除该Model实例拥有的collection属性
}
return this;
}看一下_removeReference()方法
_removeReference: function(model) {
if (this === model.collection) delete model.collection;//删除掉对collection属性，即对
model.off('all', this._onModelEvent, this);//去除all监听事件
}1.3.2 pop
将例子修改下1.3.2-1
books.pop();
看一下pop
pop: function(options) {
var model = this.at(this.length - 1);//调用原型上的at方法,返回最后一个成员
console.log(model);
this.remove(model, options);//调用remove方法，删除最后一个
return model;
}再来看下at方法
at: function(index) {
return this.models[index];//类数组拥有这个属性
}pop实际上还是调用的remove方法，通过at方法找到最后一个成员将其删除
1.3.3 shift
将例子修改一下1.3.3-1
books.shift();
看一下shift方法
shift: function(options) {
var model = this.at(0);//取到第一个成员
this.remove(model, options);//执行remove方法
return model;
}跟pop很类似。
1.4 在集合中查找模型
Collection定义了一系列用于快速从集合中查找我们想要的模型的方法，包括：
get()：根据模型的唯一标识（id）查找模型对象
getByCid()：根据模型的cid查找模型对象
at()：查找集合中指定位置的模型对象
where()：根据数据对集合的模型进行筛选
1.4.1 get
先看个例子1.4.1-1
// 定义模型类
var Book = Backbone.Model.extend({
defaults : {
name : '',
price : 0
}
}); // 定义初始化数据
var data = [{
id : 1001,
name : '构建高性能Web站点',
price : 56.30
}, {
id : 1002,
name : '深入分析Java Web技术内幕',
price : 51.80
}, {
id : 1003,
name : '编写高质量代码:Web前端开发修炼之道',
price : 36.80
}, {
id : 1004,
name : '基于MVC的JavaScript Web富应用开发',
price : 42.50
}, {
id : 1005,
name : 'RESTful Web Services Cookbook中文版',
price : 44.30
}] // 创建集合对象
var books = new Backbone.Collection(data, {
model : Book
}); // 根据id和cid查找模型对象
var book1 = books.get(1001);
var book2 = books.getByCid('c2'); // 在控制台输出模型
console.dir(book1);
console.dir(book2);
我们一个个来，先看get
var book1 = books.get(1001);
下面是get代码：
get: function(obj) {
if (obj == null) return void 0;
return this._byId[obj.id] || this._byId[obj.cid] || this._byId[obj];
}这段代码，我们之前有见过。在我们创建Model实例的时候，给每个Model实例配上一个id，我们可以根据这个id来查找。这个this._byId设定值的过程，是在set方法中完成的，如果有记不清的可以翻看之前的set方法部分。
1.4.2 getByCid
例子：
var book2 = books.getByCid('c2'); 关于cid的生成，我们在Model部分已经说过了。大家查看underscore的uniqueId方法,这里我的源码中没有getByCid的方法，这段我们先滤过。
1.4.3 at
例子
var book3 = books.at(1);
at方法之前也已经说过，它传入的参数是数组的索引。还是看一下源码吧
at: function(index) {
return this.models[index];//类数组拥有这个属性
}1.4.4 where
例子：
var book4 = books.where({
price : 51.80
}); 我们来看一下where方法
where: function(attrs, first) {
if (_.isEmpty(attrs)) return first ? void 0 : []; //检测attrs是否为空
return this[first ? 'find' : 'filter'](function(model) {//这里调用的filter是underscore里的方法
for (var key in attrs) {
if (attrs[key] !== model.get(key)) return false;
}
return true;
});
}这里调用的是this.filter方法，但是原型上并没有很明显的命名出来，那它是在声明的呢？看代码：
var methods = ['forEach', 'each', 'map', 'collect', 'reduce', 'foldl',
'inject', 'reduceRight', 'foldr', 'find', 'detect', 'filter', 'select',
'reject', 'every', 'all', 'some', 'any', 'include', 'contains', 'invoke',
'max', 'min', 'toArray', 'size', 'first', 'head', 'take', 'initial', 'rest',
'tail', 'drop', 'last', 'without', 'difference', 'indexOf', 'shuffle',
'lastIndexOf', 'isEmpty', 'chain']; // Mix in each Underscore method as a proxy to `Collection#models`.
_.each(methods, function(method) {
Collection.prototype[method] = function() {
var args = slice.call(arguments);
args.unshift(this.models);
return _[method].apply(_, args);//调用underscore相应的方法执行
};
});
看一下underscore的each方法
var each = _.each = _.forEach = function(obj, iterator, context) {
if (obj == null) return;
if (nativeForEach && obj.forEach === nativeForEach) { //是否支持原生forEach方法
obj.forEach(iterator, context);//采用原生的forEach方法
} else if (obj.length === +obj.length) {//如果obj是数组或者是类数组
for (var i = 0, length = obj.length; i < length; i++) {
if (iterator.call(context, obj[i], i, obj) === breaker) return;//让数组中的成员作为参数传入过滤器中运行
}
} else {
var keys = _.keys(obj);//返回值集合，考虑对象的情况
for (var i = 0, length = keys.length; i < length; i++) {
if (iterator.call(context, obj[keys[i]], keys[i], obj) === breaker) return;//让对象中的成员作为参数传入过滤器中运行
}
}
}我们简单理解下，_.each帮助了Collection.prototype绑定一系列方法，当Collection的实例需要调用这些方法时，注意看_.each的返回值是_[method].apply(_,args)，表示调用的实际是underscore.js中对应的方法。注意之前还有一段代码
args.unshift(this.models);
将上下文也传给underscore，这样运行不会出错。
这样，分析where方法实则变得非常简单，核心也就是那个筛选器了。我们看一下
function(model) {//这里调用的filter是underscore里的方法
for (var key in attrs) {
if (attrs[key] !== model.get(key)) return false;
}
return true;
}通过get方法，去匹配model实例集中相应属性的值，相同则返回true，在underscore中，filter方法会将其记录，存放入数组中，返回给你。
1.5 自动排序
在backbone集合对象中，为我们提供了实时排序，当任何模型对象被插入到集合中时，都会按照预定的规则放到对应的位置。
例子：
// 定义模型类
var Book = Backbone.Model.extend({
defaults : {
name : '',
price : 0
}
}); // 创建集合对象
var books = new Backbone.Collection(null, {
model : Book,
comparator : function(m1, m2) {
var price1 = m1.get('price');
var price2 = m2.get('price'); if(price1 > price2) {
return 1;
} else {
return 0;
}
}
}); books.add({
name : '构建高性能Web站点',
price : 56.30
}); books.push({
name : '深入分析Java Web技术内幕',
price : 51.80
}); books.unshift({
name : '编写高质量代码:Web前端开发修炼之道',
price : 36.80
}); books.push({
name : '基于MVC的JavaScript Web富应用开发',
price : 42.50
}, {
at : 1
}); books.unshift({
name : 'RESTful Web Services Cookbook中文版',
price : 44.30 }, {
at : 2
}); // 在控制台输出集合中的模型列表
console.dir(books.models);
注意实例化Collection时，传入的参数
// 创建集合对象
var books = new Backbone.Collection(null, {
model : Book,
comparator : function(m1, m2) {
var price1 = m1.get('price');
var price2 = m2.get('price'); if(price1 > price2) {
return 1;
} else {
return 0;
}
}
});
在我们分析comparator之前，我们回头看一下Collection的构造器
var Collection = Backbone.Collection = function(models, options) {
options || (options = {});
if (options.model) this.model = options.model;
if (options.comparator !== void 0) this.comparator = options.comparator;
this._reset();//原型上的_reset方法，第一次初始化，以后就是重置
this.initialize.apply(this, arguments);//空的init方法，用的时候，可以自己修改
if (models) this.reset(models, _.extend({silent: true}, options));//models没有值，使用options的model
};如果我们将comparator:function(){}传入构造器中，这里的options.comparator将不等于undefined。将实例的comparator属性指向该方法。
在set方法中，找到相关内容：
var sortable = this.comparator && (at == null) && options.sort !== false;
var sortAttr = _.isString(this.comparator) ? this.comparator : null;
例子中用了如add，push，unshift等方法。之前我们分析发现像push和unshift方法使用时，都传递一个at值，前者为数组长度减一，后者为0.其实这里的代码存在问题，导致排序不成功。为了实现效果，我们先修改一下。
var sortable = this.comparator && options.sort !== false;
var sortAttr = _.isFunction(this.comparator) ? this.comparator : null;
只要设置了comparator，就不需要管是通过如何方式加入model的sortable就一直会是true。
if (sortable) sort = true;//将sort置为true
继续
if (sort) this.sort({silent: true});//默认sort为false我们看一下sort方法
sort: function(options) {
if (!this.comparator) throw new Error('Cannot sort a set without a comparator');
options || (options = {});
// Run sort based on type of `comparator`.
if (_.isString(this.comparator) || this.comparator.length === 1) {//判断是否是函数
this.models = this.sortBy(this.comparator, this);
} else {
this.models.sort(_.bind(this.comparator, this));//调用数组原生的sort进行排序
}
if (!options.silent) this.trigger('sort', this, options);//系统设置了silent，这里不触发sort事件
return this;
}底层看来是调用了数组的sort方法进行排序，如果设置了silent将不会触发sort事件。细心的朋友会看到_.bind这个方法。我们来简单看一下：
_.bind = function(func, context) {
var args, bound;
if (nativeBind && func.bind === nativeBind) return nativeBind.apply(func, slice.call(arguments, 1));//是否支持原生bind
if (!_.isFunction(func)) throw new TypeError;
args = slice.call(arguments, 2);
return bound = function() {
if (!(this instanceof bound)) return func.apply(context, args.concat(slice.call(arguments)));//判断调用者是否是function，如果不是调用传入的上下文context执行func
ctor.prototype = func.prototype;//如果是的话,缺少上下文。
var self = new ctor;//将self的原型指向func的原型
ctor.prototype = null;//清空ctor构造器的原型
var result = func.apply(self, args.concat(slice.call(arguments)));//调用func，此时func的上下文是self，那self的空间又可以扩展到func的原型。
if (Object(result) === result) return result;//只有当是字符串是才返回匹配结果，这里也存在问题。
return self;
};
};这个_.bind提供了三种方式
1.第一种：使用原生bind，不清楚的朋友可以查询一下API
2.第二种：传入的信息拥有上下文的，采用func.apply(context)调用
3.第三种：如果没有上下文，我们需要创建上下文。文中给出了一个很不错的创建上下文的方式，这里源代码的判断写的并不是非常好，最后的判断有问题，应该修改一下：
return result
直接返回result，不用判断了。这是本人的一点想法，有问题或者不同意见的，大家一起讨论。
1.6 从服务器获取集合数据
backbone库的Collection提供几种方式与服务器交互
fetch()：用于从服务器接口获取集合的初始化数据，覆盖或追加到集合列表中
create()：在集合中创建一个新的模型，并将其同步到服务器
1.6.1 fetch
例子1.6.1-1
// 定义模型类
var Book = Backbone.Model.extend({
defaults : {
name : '',
price : 0
}
}); // 定义集合类
var BookList = Backbone.Collection.extend({
model : Book,
url : '/service'
}); // 创建集合对象, 并从服务器同步初始化数据
var books = new BookList();
books.fetch({
success: function(collection, resp) {
// 同步成功后在控制台输出集合中的模型列表
console.dir(collection.models);
}
});
看一下fetch方法：
fetch: function(options) {
options = options ? _.clone(options) : {};
if (options.parse === void 0) options.parse = true;//将options.parse设置为true
var success = options.success;//获取自定义的success方法，正确回调
var collection = this;
options.success = function(resp) {
var method = options.reset ? 'reset' : 'set';
collection[method](resp, options);
if (success) success(collection, resp, options);
collection.trigger('sync', collection, resp, options);
};
wrapError(this, options);//绑定错误回调
return this.sync('read', this, options);//调用sync方法，参数名read
}这里可以看出，系统在内部，将我们自定义的success封装在系统定义的success方法中，因为系统还要在成功回调之后，触发一个叫sync的监听事件。
进入sync方法看一下：
sync: function() {
return Backbone.sync.apply(this, arguments);//调用Backbone.sync，上下文为this
}好吧，到了Backbone.sync，这个方法之前model中分析过了。通过第三方ajax发送请求，这个方法主要是组装了请求内容。
1.6.2 create
看下例子1.6.2-1
var books = new BookList();
// 创建一个模型
books.create({
name : 'Thinking in Java',
price : 395.70
}, {
success : function(model, resp) {
// 添加成功后, 在控制台输出集合中的模型列表
console.dir(books.models);
}
});
看一下create方法：
save: function(key, val, options) {
var attrs, method, xhr, attributes = this.attributes;
// Handle both `"key", value` and `{key: value}` -style arguments.
if (key == null || typeof key === 'object') {
attrs = key;
options = val;
} else {
(attrs = {})[key] = val;
}
options = _.extend({validate: true}, options);//这个代码会导致bug
// If we're not waiting and attributes exist, save acts as
// `set(attr).save(null, opts)` with validation. Otherwise, check if
// the model will be valid when the attributes, if any, are set.
if (attrs && !options.wait) {
if (!this.set(attrs, options)) return false;
} else {
if (!this._validate(attrs, options)) return false;//验证通过了
}
// Set temporary attributes if `{wait: true}`.
if (attrs && options.wait) {
this.attributes = _.extend({}, attributes, attrs);
}
// After a successful server-side save, the client is (optionally)
// updated with the server-side state.
if (options.parse === void 0) options.parse = true;
var model = this;
var success = options.success;//你可以在save方法的时候写成功回调
options.success = function(resp) {//返回成功的回调
// Ensure attributes are restored during synchronous saves.
model.attributes = attributes;
var serverAttrs = model.parse(resp, options);
if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);
if (_.isObject(serverAttrs) && !model.set(serverAttrs, options)) {
return false;
}
if (success) success(model, resp, options);
model.trigger('sync', model, resp, options);
};
wrapError(this, options);//将options绑定一个error方法
method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update');//判断id，如果没有则新建，如果有再判断options.patch，改为更新
if (method === 'patch') options.attrs = attrs;
xhr = this.sync(method, this, options);
// Restore attributes.
if (attrs && options.wait) this.attributes = attributes;
return xhr;
}save方法的大致工作流程是这样的，检测是否model实例需要验证，如果有验证，进行验证。封装成功回调和错误回调穿件xhr对象，调用原型的sync方法调用第三方插件发送请求。这里我们分析下源码中关于验证的一点问题。之前model的验证，我们稍作修改达到要求，但是这个直接就报错了
这个例子中我们确实没有为Model添加validate，那系统到底怎么会在没有validate的情况下，尝试去执行validate呢？
问题就在save方法里：
options = _.extend({validate: true}, options);//这个代码会导致bug这里会莫名其妙的给options加上validate等于true，然后在_validate方法中
if(!this.validate && !options.validate) return true//没有验证，直接通过//这里有修改过
这段代码，会直接通过。可能之前修改Model的时候，源代码是||，这里我们将validate:true这段代码注释掉。则代码不报错了。但是又有一个问题。如果例子1.6.2-1修改为
例子1.6.2-2
var books = new BookList();
// 创建一个模型
books.create({
name : 'Thinking in Java',
price : 395.70
}, {
success : function(model, resp) {
// 添加成功后, 在控制台输出集合中的模型列表
console.dir(books.models);
},
validate: function(data){
if(data.price > 0){
return 'hello world';
}
}
});
代码不会报错，但是终端不会显示hello world，细细一想，其实我们没有自定义那个invalid事件，但是问题来，如此定义，我们无法直接获取到我们想要监听的那个model实例对象，所以你也就无从绑定起。这也是backbone需要优化的地方。实际运作中，大家根据需求自行添加吧，这里方法很多，就不细说了。
1.7 将数据批量同步到服务器
Backbone中集合提供了数据同步和创建的方法与服务器进行交互，但实际上这可能并不能满足我们的需求，backbone学习的作者给出了一些自定义的批量方法。
1.7.1 createAll
先看例子：
// 定义模型类
var Book = Backbone.Model.extend({
defaults : {
name : '',
price : 0
}
}); // 定义BookList类
var BookList = Backbone.Collection.extend({
model : Book,
url : '/service',
// 将集合中所有的模型id连接为一个字符串并返回
getIds : function() {
return _(this.models).map(function(model) {
return model.id;
}).join(',');
},
// 将集合中所有模型提交到服务器接口
createAll : function(options) {
return Backbone.sync.call(this, 'create', this, options);
},
// 修改集合中的所有模型数据
updateAll : function(options) {
return Backbone.sync.call(this, 'update', this, options);
},
// 删除集合中所有的模型
deleteAll : function(options) {
var result = Backbone.sync.call(this, 'delete', this, _.extend({
url : this.url + '/' + this.getIds()
}, options));
this.remove(this.models);
return result;
}
}); // 创建集合对象
var books = new BookList(); // 当集合触发reset事件时, 对数据进行批量同步
books.on('reset', function() {
books.createAll();
books.updateAll();
books.deleteAll();
}); // 从服务器接口同步默认数据
books.fetch();
看一下，自定义方法绑定在collection原型上，实例可以调用。自定义方法基本都调用Backbone.sync方法，这是封装params的方法。如果客户端数据发生改变时，向服务器发出同步请求(更新，删除，修改)。以此达到同步目的。另外就是，自定义绑定到collection实例上，实例包含了很多个model实例，也就达到了批量的作用。
内容不多，时间刚好，以上是我的一点读码体会，如有错误，请指出，大家共通学习。