BackBone 学习 （一）

开始慢慢学习BackBone.js正好熟悉JS的MVC模式。

暂时整理的资料：

英文文档

中文文档

知乎上的建议

BackBone的学习我也不知道从哪开始，以前看过一段时间的源码，结构还是比较熟悉的，还是先按照别人总结的BackBone的使用的例子入手，然后再来分析框架。

第一个例子：

(function($){
var ListView = Backbone.View.extend({
el:$('body'),
initialize:function(){
_.bindAll(this, 'render');
this.render();
},
render:function(){
$(this.el).append('<ul><li>hello world</li></ul>')
}
});
var listView = new ListView();
})(jQuery);

_.bindAll(

object, *methodNames

)这个函数：把后面的参数指定的方法都绑定到object上，这些方法则会在object的上下文中执行，主要是为了让object中的

methodNames

参数名

的函数能够在object的上下文执行。each(funcs, function(f) { obj[f] = _.bind(obj[f], obj); });

_.bind = function(func, context) {
if (func.bind === nativeBind && nativeBind) return nativeBind.apply(func, slice.call(arguments, 1));
var args = slice.call(arguments, 2);
return function() {
return func.apply(context, args.concat(slice.call(arguments)));
};
};

改变上下文执行环境。

这里就是把render()函数中的上下文纠正到ListView中，但是这里render函数的上下文已经是ListView，不需要纠正也可以。

这里我需要注明两点：

如果函数在function(){}中，即匿名函数块中，执行环境不会改变。

给事件添加的onclick函数中的this指向，始终为window,惹事listView.render()之类的，就是listView。

这个例子很简单，就是一个视图。

第二个例子：

(function($){
var ListView = Backbone.View.extend({
el: $('body'), // el attaches to existing element
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem'); // every function that uses 'this' as the current object should be in here

this.counter = 0; // total number of items added thus far
this.render();
},
render: function(){
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
},
addItem: function(){
this.counter++;
$('ul', this.el).append("<li>hello world"+this.counter+"</li>");
}
});

var listView = new ListView();
})(jQuery);

照例是个视图，只不过视图上的对象增加了个事件，'click button#add': 'addItem'触发click，执行addItem事件。然后内部变量counter保存点击的次数。

第三个例子

(function($){
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});
var List = Backbone.Collection.extend({
model: Item
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem'); // remember: every function that uses 'this' as the current object should be in here

this.collection = new List();
this.collection.bind('add', this.appendItem); // collection event binder

this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){ // in case collection is not empty
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter // modify item defaults
});
this.collection.add(item); // add item to collection; view is updated via event 'add'
},
appendItem: function(item){
$('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
}
});

var listView = new ListView();
})(jQuery);

这个例子，引进了视图、模型跟控制器。简要说明下这里触发事件是通过this.collection.add(item)，然后就会触发默认的add事件，然后把数据传到函数中。

不过经过上面有些暂时没用的内容很是影响理解，简化到

(function($){
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});
var List = Backbone.Collection.extend();

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem'); // remember: every function that uses 'this' as the current object should be in here

this.collection = new List();
this.collection.bind('add', this.appendItem); // collection event binder

this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter // modify item defaults
});
this.collection.add(item); // add item to collection; view is updated via event 'add'
},
appendItem: function(item){
$('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
}
});

var listView = new ListView();
})(jQuery);

然后就好理解了，触发addItem事件，然后生成新的数据模型，改变其中的part2的值，然后给集合增加模型，当然触发了add事件，add事件在视图的构造函数中定义为appendItem函数。

第四个例子

(function($){
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});

var List = Backbone.Collection.extend({
model: Item
});

var ItemView = Backbone.View.extend({
tagName: 'li', // name of (orphan) root tag in this.el
initialize: function(){
_.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here
},
render: function(){
$(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
return this; // for chainable calls, like .render().el
}
});

var ListView = Backbone.View.extend({
el: $('body'), // el attaches to existing element
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here

this.collection = new List();
this.collection.bind('add', this.appendItem); // collection event binder

this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){ // in case collection is not empty
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter // modify item defaults
});
this.collection.add(item);
},
appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
}
});

var listView = new ListView();
})(jQuery);

这个例子与上一个只是在重新申明了一个视图，在appendItem时委托给这个新申明的视图。
第五个例子

(function($){

Backbone.sync = function(method, model, success, error){
success();
}

var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});

var List = Backbone.Collection.extend({
model: Item
});

var ItemView = Backbone.View.extend({
tagName: 'li', // name of tag to be created
events: {
'click span.swap': 'swap',
'click span.delete': 'remove'
},
initialize: function(){
_.bindAll(this, 'render', 'unrender', 'swap', 'remove'); // every function that uses 'this' as the current object should be in here

this.model.bind('change', this.render);
this.model.bind('remove', this.unrender);
},
render: function(){
$(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span>     <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
return this; // for chainable calls, like .render().el
},
unrender: function(){
$(this.el).remove();
},
swap: function(){
var swapped = {
part1: this.model.get('part2'),
part2: this.model.get('part1')
};
this.model.set(swapped);
},
remove: function(){
this.model.destroy();
}
});
var ListView = Backbone.View.extend({
el: $('body'), // el attaches to existing element
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here

this.collection = new List();
this.collection.bind('add', this.appendItem); // collection event binder

this.counter = 0;
this.render();
},
render: functio
a8f1
n(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){ // in case collection is not empty
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter // modify item defaults
});
this.collection.add(item);
},
appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
}
});

var listView = new ListView();
})(jQuery);

这里多了个swap与delete事件，这个事件是通过model改变model的值，然后通知视图跟新。先是触发事件，然后执行函数，检测到模型数据变化，最后是刷新视图。