backbone简单学习
0.导包
<script src="jquery-2.0.3.min.js"></script>
underscore-min.js 数据模型操作类
backbone-min.js
1.新建对象
var model = new Backbone.Model();
var models = new Backbone.Collection();
var view = new Backbone.View();
通过无参或有参构造函数创建
2.给对象添加属性
var model = newBackbone.Model();
model.set('name','a');//可以接受一个json
model.get('name');
3.绑定collection
3.将模型放入集合
var model1 = new Backbone.Model({'name':'hello'});
var model2 = new Backbone.Model({'name':'hi'});
var models = new Backbone.Collection();
models.add(model1);
models.add(model2);
JSON.stringify(models);
4.给构造函数添加实例方法和静态方法
var M = Backbone.Model.extend({
aaa:function(){ //第一个参数，扩展实例方法
alert(123);
}，{
bbb:function(){
alert(456);
}
});
var model = new M;
model.aaa();
M.bbb();
5.给构造函数设置默认属性
var M = Backbone.Model.extend({
defaults:{
name:'hello'
}
});
var model = new M;
model.get('name');
6.对象的继承
var M = Backbone.Model.extend({
aaa:function(){
alert(123);
}
});
var ChildM = M.extend();
var model = new ChildM();
model.aaa();
7.自定义事件（为了更好的进行多人开发）
防止函数互相覆盖，事件绑定是不可以覆盖的。
所有事件列表参见Catalog of Events 有14个事件 所有的API：documentcloud.github.io/backbone/#Events-catalog
var M = Backbone.Model.extend({
defaults:{
name:'hello'
},
initialize:function(){//改写初始化函数
//在初始化的时候添加一个数据变化的事件
this.on('change',function(){
alert(123);
});
}
});
var model = new M;
model.set('name','hi');
8.自定义事件，制定某一具体数据变化时候调用,和事件的回调参数。
var M = Backbone.Model.extend({
defaults:{
name:'hello'
},
initialize:function(){
this.on('change:name',function(model){
console.log(model);
//关于model对象中各种属性，详见API。
});
}
});
var model = new M;
model.set('name','hi');
9.模型和视图绑定
$(function(){
var M = Backbone.Model.extend({
defaults：{
name:'hello'
}
});
var V = Backbone.View.extend({
//视图的初始化方法
initialize:function(){
this.listenTo(this.model,'change',this.show);//比on多了一个参数，可以指定操作的元素指向了this.model
}，
//视图的显示方法
show:function(model){
$('body').append('<div>'+model.get('name')+'</div>');
}
});
//将视图和模型绑定
var m = new M;
var v = new V({model:m});
m.set('name','hi');
});
10.数据与服务器
//使用Ajax与服务器同步
Backbone.sync = function(method,model){//改写了同步的处理方式
alert(method + ":"+JSON.stringify(model));
//结果：mothod 会自动区分是create还是update,这里可以自定义除了ajax的其他提交方式。
model.id = 1;
};
var M = Backbone.Model.extend({
defaults:{
name:'hello'
},
url :'/user' //指定Ajax同步的url，与服务器交互一定要指定
});
var m = new M;
m.save();//把现在的模型对象保存到服务器上
m.save({name:'hi'});//把修改过的数据同步到服务器上
11.Fetch(获取)一个集合的数据。model的Fetch方法
Backbone.sync = function(method,model){
//Mock提交过程，method为read
};
var C = Backbone.Collection.extend({
initialize : function(){
//reset，当获取到服务器数据后触发
this.on('reset',function(){
//在此处进行画面的渲染
alert(123);
});
},
url:'/users' //获取数据地址
});
var models = new C;
models.fetch();//获取服务器的数据
12.路由与历史管理
在一个页面进行开发，没有跳转，则用Hash值作为每个页面的标记进行历史标记。
如果浏览器支持HTML5 则默认使用html5 的历史栈。
var Workspace = Backbone.Router.extend({
routes:{
//用JSON指定对应hash值所执行的函数（hash为help时，执行下面的help方法）
"help": "help", //#help
"search/:query": "search", //#search/kiwis
"search/:query/p:page": "search" //#search/kiwis/p7
},
help:function(){
alert(1);
},
search:function(query,page){
alert(2);
}
});
var w = new Workspace;
//开启backbone的历史管理，写了才能后退前进时触发
Backbone.history.start();
13.事件委托
$(function()
var V = Backbone.View.extend({
el:$('body'), //指定事件委托的对象
events:{
'click input':'aaa', //body中 input对象的click方法触发方法aaa
'mouseover li':'bbb'
},
aaa:function(){
alert(123);
},
bbb:function(){
alert(456);
}
});
var view = new V;
)
14.前端模板，让JS与视图分离
改写9：9中HTML和JS混在，可以使用underscore中自带的模板
<%=name%> 中添加值
<%_.each(people,function(name){%> 来调用js(很像早期JSP的写法)
<% } %>
<%- value%> 编码，返回处理过后的特殊字符，(翻译<)
demo:
<body>
<script type="text/template" id="template">
<% for(var i=0;i<5;i++){ %>
<div><%= name %></div>
<% } %>
</script>
</body>
$(function(){
var M = Backbone.Model.extend({
defaults：{
name:'hello'
}
});
var V = Backbone.View.extend({
//视图的初始化方法
initialize:function(){
this.listenTo(this.model,'change',this.show);//比on多了一个参数，可以指定操作的元素指向了this.model
}，
//视图的显示方法,在这里添加模板
show:function(model){
$('body').append( this.template(this.model.toJSON()));//添加内容是调用模板方法
},
template:_.template($('#template').html())//模板方法是条用underscore库中的_template方法导入ID为template中的html.
});
//将视图和模型绑定
var m = new M;
var v = new V({model:m});
m.set('name','hi');
});
json2.js针对IE678解析JSON parse 和 toStingify
backbone.locakStorage.js本地存储，不用AJAX
感谢妙味课堂的初探backbone系列。
