backbone
Backbone.js提供模型(models)、集合(collections)、视图(views)的结构。
Models: 是引用程序的核心，也是表示数据，用于绑定键值数据和自定义事件
Collectoins：是对Model的一个容器，包含多个模型，并提供一些方法，来访问这些模型，集合附有可枚举函数的丰富API
View：可以在视图中声明时间，在视图中处理集合或者模型，也可以地工艺方法啊，可以暴露出来一些借口，视图可以声明事件处理函数，并通过接口连接到应用程序。
Router： 路由， 看作简化版的控制器。(Backbone弱化了Controller)
使用
依赖的工具库jquery.js,zepto.js 等underscore.js/lodash.js 等
Model
创建模型
//构造函数：var pink = new Backbone.Model({ color: 'pink'}); //extend:var Pink = Backbone.Model.extend({});var p = new Pink({ color: 'pink'}); 默认值
defaults: 表示模型类的默认值， 当模型实例化的时候，这些默认值就会被赋值上。
var WangCai = Backbone.Model.extend({ //默认值 defaults: { kg: 20, name: 'wangcai', age: 2 } }); initalize
initialize: 在模型对象的实例化时，构造函数可以对模型再次更改
var WangCai = Backbone.Model.extend({ //构造函数 initialize: function () { if ( this.attributes.price ) { this.attributes.onSale = true; } } }); 获取属性
get，获取模型实例化对象属性的方法，直接在模型实例化对象上调用
参数：表示属性值var WangCai = Backbone.Model.extend({ //默认值 defaults: { kg: 20, name: 'wangcai', age: 2 }, //构造函数 initialize: function () { if ( this.attributes.price ) { this.attributes.onSale = true; } } });var ww = new WangCai({ price: 1000});var price = ww.get('price');console.log( price ); //1000 Json 转化
toJSON： 将模型对象的attributes属性转化为JSON对象，该方法直接在模型对象上调用
等同于JSON.parse(JSON.stringify(clothes))方法var clothes = new Clothes({ price: 158})var attributes = clothes.toJSON(); 设置属性
set()
设置模型实例化对象属性方法，直接在实例化模型对象上调用第一种传参方式
参数1，属性名称
参数2，属性值
第二种传参方式
传递一个对象，这个对象映射到模型的attributes上的属性对象var ww = new WangCai({ price: 1000});ww.set('color','pink'); ww.set({ say: function () {}, zf: 'dd'}); Model事件
Backbone实例对象的继承Backbone.Model，Backbone.Model继承了事件的方法，所以就可以在构造函数中使用绑定事件的方法on，通过this访问
on方法的使用：
第一个参数表示事件的名称
第二个参数表示事件的回调函数
当调用set添加属性时候会触发change事件，但set传递{silent: true}参数时候，该事件就不能被触发了
//构造函数initialize: function () { //on事件可以使用命名空间 this.on('change',function ( model ) { console.log(123); }); } ww.set({ say: function () {}, zf: 'dd'},{silent: true });//添加属性不被事件捕获， 通过 set的第二个参数 {silent: true} 来设置 模型对象是否被修改
hasChanged() 当模型调用了set更改属性的时候，该方法返回true，表示被修改过。
// ww 实例对象 未被修改console.log( ww.hasChanged() );// false // ww.set('color','pink',{silent: true }); ww.set({ say: function () {}, zf: 'dd'},{silent: true });//实例对象 已经被修改，添加 其它属性和方法 console.log( ww.hasChanged() );// true 删除属性
unset() 删除模型实例化对象上属性， 直接在实例化对象上调用
参数1：删除的属性名参数2：一些配置ww.unset('zf'); validate：检验删除是否合理，但是删除方法unset时候，必须传递{validate： true}才能校验
validate 验证删除是否合理，在unset第二个参数传递。参数，是该实例化对象的attributes对象
返回：true 删除失败false 删除成功ww.validate = function (attr) { if (!attr.width) { return true; } return false;}// 验证删除操作var result = a.unset('width', {validate: true}) View
backbone 视图层
创建
//构造函数var App = new Backbone.View({ tanName: 'h1', id: 'app', className: 'app'}); // extendvar App = Backbone.View.extend({ initialize: function () { this.$el.html('¥79.00').css({ 'background': 'tan' }) } }); view实例化对象
cid： 该视图实例化id
el： 该元素$el: jquery的对象视图元素
el：表示视图的元素
实例化创建添加属性
var divView = new App({ el: $('#app')}); initialze
initialze 表示视图类的构造函数
var App = Backbone.View.extend({ initialize: function () { this.$el.html('¥79.00').css({ 'background': 'tan' }) } }); 更改元素
setElement 将新元素替换原有的元素
divView.setElement();参数可以是字符串，那么就将该字符串渲染成元素
参数也可以是dom元素，那么就直接该元素替换
在实例化后更改，所以不会影响到原构造函数已经执行的逻辑
divView.setElement('123
'); 获取视图内部的元素
$:视图实例化对象为我们提供了一个方法来获取其自身的元素
this.$el.html();
视图模板
template, underscore提供获取并格式化模板的方法
tpl: _.template(' ￥<%= price%> '); //moduelvar Price = Backbone.Model.extend({ defaults: { price: 100, info: 'xixihaha' }})//viewvar View = Backbone.View.extend({ model: new Price(), tpl: _.template(' ¥<%= price%> <%= info%> '), initialize: function () { //数据 var data = this.model.toJSON(); //html var html = this.tpl(data); this.$el.html(html).css('background','pink'); } })var appView = new View({ // model: new Price(), //model 也可以在 new View() 实例化的时候 进行 el: $('#app')}); 渲染视图
render：为了让视图实例对象可以在外部渲染视图，定义的方法
// 视图var App = Backbone.View.extend({ render: function () { // 渲染父页面的视图 var item = new Item({ model: new Price() //子视图实例化 }) item.render(); // console.log(item.el) this.$el.append(item.el) }}); var app = new App({ el: $('#app')});app.render(); view 事件监听
events： 基于委托模式，对el元素委托
{ '事件名 委托元素的选择器': '事件回调方法'} var ItemView = Backbone.View.extend({ tpl: _.template($('#itemView').html()), events: { 'mouseleave .item': 'hideSeeDom' }, hideSeeDom: function (e) { this.$('.see').hide().css('top', 290) }}) collection
集合：表示数据模型的一个有序集合
每个方法都有返回值
每个方法通常会有一个对应的事件，这个事件的名称大部分是方法的名称
创建collection
var ItemContainer = Backbone.Collection.extend({ model: ItemModel //集合对应的模型}); 实例化collection
//可以传递 js 对象,但是没有id {} ,不建议var item = new ItemModel();var itemContainer = new ItemContainer(item); //一个 模型var itemContainer = new ItemContainer([item1,item2]); //多个模型 collection添加模型
向集合中增加一个模型（或一个模型数组），会触发"add"事件.
重复添加模型实例化对象会被去重的var item = new ItemModel();itemContainer.add(item);itemContainer.add([item1]);
转成JSON
可以将一个集合转化为一个JSON对象
得到的结果是一个新的对象，不是对原有对象的引用itemContainer.toJSON()
获取模型
get ：接收模型参数，接收id，或者cid（如果对象有id，可以通过对象获取，如果对象没有id就不能通过id获取）
在创建模型的时，传递id属性，此时，id属性会被传递到模型的最外成属性（attributes，cid，changed在一个层次）
itemContainer.get(item);itemContainer.get(id);itemContainer.get(cid);
删除模型
remove：删除集合中的模型
可以传递一个模型
也可以传递一个模型组成的数组
还可以传递一个具有id的对象
返回的结果是删除的模型实例化对象
itemContainer.remove(item);itemContainer.remove([item,time2]);// remove 函数//collectionvar ItemCollection = Backbone.Collection.extend({ model: ItemModel, initialize: function () { this.on('remove',function ( model ) { console.log( model ); }); }}) collection initialize
collection构造函数，是在collection被实例化的时候调用，在它里面添加的事件会监听所有的实例化对象
var IterContainer = Backbone.Collection.extend({ model: ItemModel, initialize: function () { this.on('add',function ( model ) { console.log(model); //false }); }}); collection events
collection 添加事件，事件有两种添加方式
添加在构造函数内，此时会监听所有实例化对象
添加在实例化对象上，只能监听后面添加的行为，只能监听该实例化对象上添加行为
//collectionvar ItemCollection = Backbone.Collection.extend({ model: ItemModel, initialize: function () { // add 添加 //在 initialize内添加 this.on('add',function (model) { console.log( model ); }); }})//itemCollection.add([item,item2]); 触发事件 //实例化对象上添加itemContainer.on('add', function ( model ) { console.log( model );}); 重置collection
reset() 清空collection
reset事件与其他方法的事件的区别，reset事件的回调函数中的参数是一个集合实例化对象，该对象就是构造函数中的this，
其他方法的事件的回调函数的参数是一个模型实例化对象，不等于构造函数中的this reset事件与其他方法的事件区别，reset事件的回调函数中的参数是一个集合实例化对象，该对象就是构造函数中的this。其它方法的时间的回调函数colletion.reset();//reset 事件//collectionvar ItemCollection = Backbone.Collection.extend({ model: ItemModel, initialize: function () { //绑定事件 this.on('reset',function ( model ) { console.log( model ); }); }} collection 映射数据
fetch
从服务端拉取数据映射到集合中注意：在collection中 声明属性 url
var ItemModel = Backbone.Model.extend({}); var ListCollection = Backbone.Collection.extend({ model: ItemModel, url: 'data/list.json', //声明 initialize: function () { this.on('add',function ( model ) { console.log( model ); }); }});var listCollection = new ListCollection();//拉取数据listCollection.fetch({ success: function ( collections ) { console.log( collections,'collections' ); }}); 路由 router
//路由var Routers = Backbone.Router.extend({ routes: { home: 'showHome', 'en/ch/:dict': 'showSerch' }, showHome: function () { console.log('showHome'); }, showSerch: function ( dict ) { var dictView = new DictView({ el: $('.div') }); dictView.render( dict ); } });var router = new Routers();//开启 路由 //需要在 history 开始Backbone.history.start(); 路由规则
通过 '/' 进行路由切分,自由匹配获取，再前面加':' (注意：第一个'/'可有可无)
#search/:query:page
*other 表示其它不匹配的规则都到该路由下，通常将该规则放到最后
var Routers = Backbone.Router.extend({routes: { home: 'showHome', 'en/ch/:dict': 'showSerch', '*other': 'showDefault'},showHome: function () { console.log('showHome');},showSerch: function ( dict ) { var dictView = new DictView({ el: $('.div') }); dictView.render( dict ); },showDefault: function () { console.log('showDefault'); }});var router = new Routers();//开启 路由Backbone.history.start(); Events
在backbone中用events表示事件对象，但是它是单体对象，不要直接使用它，将它的属性和方法继承下来。
为了避免冲突，需要使用空对象添加属性和方法。var myEvent = _.extend({}, Backbone.Events); 订阅事件
on方法订阅事件
var EventsModel = Backbone.Model.extend();var events = new EventsModel();events.on('dd',function ( msg ) { console.log( msg ); }); 发送事件
trigger()
events.trigger('dd','info'); 注销事件
off()
注销事件，写在触发事件的前面注销带有命名空间的事件，需要添加上命名空间myEvent.off('change')myEvent.off('change:color') 取消其它对象监听
stopListening()
参数：可以不传，取消所有对所有对象的监听
一个参数：被监听的对象，此时取消该对象上的所有的事件监听
-
两个参数：此时取消该对象上该事件的监听
// 取消监听ev1.stopListening();// 仅仅取消对ev2的监听ev1.stopListening(ev2);// 仅仅取消ev2上面的change事件ev1.stopListening(ev2, 'change');
多个对象消息监听
//多个事件 联系 var ev1 = _.extend({},Backbone.Events);var ev2 = _.extend({},Backbone.Events);var ev3 = _.extend({},Backbone.Events);ev2.listenTo(ev1, 'change', function ( msg ) { console.log( msg ); });ev2.listenTo(ev1, 'add', function ( msg ) { console.log(msg); });ev2.listenTo(ev1, 'dd', function ( msg ) { console.log(msg); });ev2.stopListening(ev1, 'change');ev1.trigger('change', 'hello');ev1.trigger('add', 'world');ev1.trigger('dd', 'pink'); M、V、Collections消息监听
//模型 和 视图 之间的 事件联系 collection 和 view 之间的联系var eventModel = new Backbone.Model();var eventView = new Backbone.View();var EventCollection = Backbone.Collection.extend();var eventCollection = new EventCollection();eventView.listenTo(eventModel,'change',function ( msg ) { console.log(msg); });eventView.listenTo(eventCollection, 'remove', function ( msg ) { console.log( msg,'--' ); });eventModel.set({ color: 'pink', age: 2});eventCollection.add(eventModel);eventCollection.remove(eventModel);