作者：zccst
作为一个大型程序框架，backbone的思路是很好的
下面就好好学习一下
基本使用：
1，直接创建对象
2，给构造函数添加实例方法和静态方法
3，继承操作
4，自定义事件
5，数据与服务器
6，路由与历史管理
7，事件委托
8，前端模板
举例：
1，直接创建对象
var o = Backbone.Model();
2，给构造函数添加实例方法和静态方法
3，继承操作
A是一个Model，添加了aa方法
B是一个继承A的Model，则B的对象也有aa方法
4，自定义事件
var M = Backbone.Model.extend({
default:{
name:'hello'
},
//初始化构造函数
initialize:function(){
//表示model发生变化时触发
/*this.on('change',function(){
alert(123);
});*/
this.on("change:name",function(model){
console.log(model);
});
}
});
var m = new M();
m.set("name","w1");
m.set("name","w2");
m.set("name","w3");
/**模型与视图相结合的例子*/
var M = Backbone.Model.extend({
default:{
name:'hello'
}
});
var V = Backbone.View.extend({
//初始化构造函数
initialize:function(){
//表示model发生变化时触发
this.listenTo(model, 'change', show);
},
show :function(model){
$("body").append("<div>"+model.get("name")+"</div>");
}
});
var m = new M;
var v = new V({model:m});//model与view发生联系是将model对象传入view对象
m.set("name","ww");
5，数据与服务器
Backbone.sync = function(method_name, model, callback){
console.log(method_name + JSON.stringify(model));
model.id = 1;
};
var M = Backbone.Model.extend({
default:{
name:'hello'
},
url:"/user"
});
var m = new M;
m.save();//保存，调用validate，调用sync，第一次是create，第二次是update
m.save("name","ww");
还有Collection与服务器端调用（待续）
6，路由与历史管理
当在浏览器输入不同的URL时，调用不同的方法
var R = Backbone.View.Route({
routes : { //路由映射
'help' : help,
'help/method': search,
}
help : function(){alert('a');},
search : function(){alert('b');}
});
var r = new R;
history.start();
对于历史管理：就是在前进或后退时也会触发调用（因为URL发生了变化）
7，事件委托
var V = Backbone.View.extend({
el:$("body"), //委托元素
events : { //委托事件
'click input' : aaa,
'mouseover li': bbb,
}
aaa : function(){alert('a');},
bbb : function(){alert('b');}
});
<body>
<input />
<ul><li>1</li></ul>
</body>
8，前端模板
例子分析：TODOS
如果您觉得本文的内容对您的学习有所帮助，您可以微信：
分享到：
相关推荐
Learn how Backbone.js brings MVC benefits to the client-side Write code that can be easily read, structured, and extended Work with the Backbone.Marionette and Thorax extension frameworks Solve ...
backbone 资料
backbone.js提供了一套web开发的框架，为复杂javascript应用程序提供一个mvc结构。, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始，...
backbone.js提供了一套web开发的框架，为复杂javascript应用程序提供一个mvc结构。, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始，...
backbone-boilerplate, 一组用于构建 backbone.js 应用程序的最佳实践和实用工具 Backbone 模板这个样板是许多研究和挫折的产物。 现有的boilerplates修改 Backbone 核心，没有构建过程，或者者是非常规范的，这样的...
backbone.js 1.1.2
Java 演示 backbone 基本用法 View Model Collection
Learn how Backbone.js brings MVC benefits to the client-side Write code that can be easily read, structured, and extended Work with the Backbone.Marionette and Thorax extension frameworks Solve ...
react-backbone, Backbone 感知mixin用于响应和更多 反应中枢为 Backbone 提供对你的的响应，以响应你的组件，。将 backbone/backbone 。集合感知awareness你的反应组件mixin用于更新模型更改事件，请注意xhr活动和...
backbone官方Todo示例内含自己详细注释，建议运行之后打开浏览器调试同步学习。
backbone中文api
backbone-boilerplate, 用于构建 Backbone 应用程序的工作流 Backbone 模板这个样板是许多研究和挫折的产物。 现有boilerplates自由修改 Backbone 核心，缺少构建过程，并且非常规范；Backbone 样板文件的变更。...
Backbone.js初学者教程（1） 作者: 阿伦 日期: 2012 年 3 月 15 日 分类: Javascript标签: Backbone.js, Javascript, Tutorial, 前端开发, 结构化 最近在google trends上看了backbone.js近些年的搜索指数：
backbone+seajs实战
backbone的扩展库backbone-localstorage.js
backbone的API 及实例
backbone.js,underscore.js,jquery-1.10.2.js
backbone+extjs 开发的API框架