作者:zccst
之前简单熟悉了一下,看了一两个例子,就以为已经掌握了,就停滞不前了。
直到在项目中真正用到,才知道自己是多么无知。下定决心:
首先,彻底完整看一遍手册(期间也是相当痛苦的,没有一气呵成的流畅?是不是老了?)
其次,是看Todo实例。
当我一点点录入,并在TodoView和Appview的render方法中分别console.log(xx)过程中才有那么一点点进步。
下面就记录对backbone逐渐深入的理解:
backbone本身的结构并不难理解,分别是(根据Todo实例)
//模型
var model = Backbone.Model.extend({
validate:function(){}
});
//集合
var Collect = Backbone.Collection.extend({
model : model,
comparator:function(){},//比较器,方便model排序
method1:function(){},
method2:function(){}
});
var lists = new Collect;//创建集合对象
//某一个元素视图
var itemView = Backbone.View.extend({
tagName:"li",
template:_.template($("#xx").html()),
events:{
"click #edit":edit,
"click #del":del
},
initialize:function(){//初始化:绑定dom元素,监听事件等
this.listenTo(this.model, "change", render);
this.listenTo(this.model, "destroy", this.remove);//直接删除DOM节点
},
render:{
//渲染当前item
return this;//在页面渲染时会用到
},
edit:function(){},
del:function(){}
});
//页面视图
var AppView = Backbone.View.extend({
el:$("#"),//
template:_.template($("#xx").html()),
events:{
"click #create":createOnEnter,
},
initialize:function(){//初始化:绑定dom元素,监听事件等
this.listenTo(lists, 'add', addOne);
this.listenTo(lists, '', method1);
this.listenTo(lists, '', method2);
},
render:{
//渲染除item外的其他部分
},
createOnEnter:function(e){//events中绑定的,参数是event
lists.create({keyName:value});//触发Collection的add事件
},
addOne:function(model){//initialize中绑定的,参数是model
var view = new itemView(model:model);
this.$el.append(view.render().el);//相当于是itemView渲染后的el。
},
method1:function(){},
method2:function(){}
});
然而上面的逻辑并不难理解,较难的是集合和模型在增删查改时触发的事件,这使我眼花缭乱,特别是all。
比如:较难理解的几个事件:
1,Todos.fetch()方法到底做了什么?
经验证:
没有触发集合change事件
没有触发集合reset事件
没有触发集合remove事件
有触发集合的add事件,而且是逐一取出的
而add在AppView的initialize里监听了两次。一次是渲染AppView的addOne(逐个加载每一个item),另一次是渲染AppView的render(逐次计算done和remaining)
推理:也没有触发model的change和destroy事件。
2,勾选TodoView中的checkbox事件
由于调用了model的save()方法,所以触发了Collection的change(由于change绑定TodoView的render,所以会重新渲染)
由于model发生了变化,Collection也相应感知,所以也触发了Collection的change事件(由于change绑定AppView的render,所以会重新渲染)
3,删除TodoView中的li
this.model.destroy();//从model中销毁
触发destroy事件
this.listenTo(this.model, 'destroy', this.remove);//删除DOM节点,自己消失
从model中销毁又关联触发Collection的remove事件
this.listenTo(Todos, 'remove', this.render);//底部统计计算
4,创建一个新的
Todos.create({title:this.input.val()});
触发Collection的add事件,调用addOne(带着item,添加到页面)和AppView的render(底部渲染后)
model增加,再触发itemView的change事件,调用render。
集合增加,再触发AppView的change事件,调用render。
5,全部删除
_.invoke(Todos.done(), 'destroy');//清除所有被选中的(done:true的)
var arr = Todos.done();for(var item in arr){ arr[item].destroy(); };
首先,model物理删除。
触发model的destroy事件,remove当前Dom节点
冒泡触发Collection的remove事件,调用render(计算底部统计)。
6,全选
var done = this.allCheckbox.checked;
Todos.each(function(todo){ todo.save({'done':done}); });
依次save每一个model,监听change事件,调用TodoView的render方法
model的change传感给Collection的change事件,调用AppView的render方法。
下面的总结相当于是手册,供忘记时查询:
监听model事件有:
change:set (如果修改了model状态时触发)
unset 去除某个属性
clear 去除全部属性
save (保存新的属性值时触发)如果只保存改变的属性{attrs:{patch:true}}
fetch(当服务器端与当前不一致时触发)
destroy:destroy方法触发destroy事件后,会继续冒泡至Collection的remove事件
监听Collection事件有:
add : fetch(新增时), set(新增时), add({merge:true}时), create
change : fetch(修改时), set(修改时), add
remove : fetch(删除时), set(model被删时), remove
reset : reset
/*
批注1:add只有在{merge:true}才会触发change事件
批注2:fetch会“智能”合并,除非你设置{merge:false},此时会reset
后端新增时,fetch才触发add事件
后端修改时,fetch才触发change事件
fetch({remove:false})不移除,{remove:true}时才触发remove事件
批注3:set可以通过{add:false},{remove:false},{merge:false}使不触发对应事件*/
//特殊事件 "all" 会在任意事件发生时被触发
all
AppView中initialize的add, change, remove 加起来基本可以相当于all事件了。
reset的使用场景:
1,调用fetch()方法时加了{reset:true}时触发reset事件
2,直接reset({...});时触发reset事件
与之同时,两者之前的关系是:
model的change事件都会引起Collection的change事件。
model的destroy事件会引起Collection的remove事件。
批注:两者引起是不交叉的
model的change不会引起Collection的remove事件
model的destroy不会引起Collection的change事件
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
一个 Backbone 启发的事件系统。 应用程序接口: on(事件名称,回调) 添加事件监听器 参数: 字符串事件名称 函数回调 关闭(事件名称,回调) 移除事件监听器 参数: 字符串事件名称 函数回调 触发器(事件...
但重点功能在于其提供了一套功能强大,使用简单的存、取、删、改数据方法,并在不同的操作里加了相应的监听事件, 如每次修改添加里都会触发 change,这在据模型变动来修改视图时很常用,并且与collection建立了关联...
每个组件视图、模型和控制器发出事件,组件控制器其他组件可以监听这些事件。 组件控制器监听它自己的组件事件和其他组件事件。 楷模用户.js 收藏用户.js 控制器 编辑.js 细节.js 项目.js 列表.js 模板 编辑...
routes监听标签点击事件,ajax调用类似于backbone里面的routes,不过功能没有那么强大,因为开始设计时候只是想到路径能在网址栏显示就行了,后端直接ajax返回html,append;支持浏览器历史history####用法:...
它是可组合的,允许您封装加载器逻辑,并对监听更改事件进行细粒度控制。 用法 // backbone-signal extends Backbone.Model var app = new Backbone . Model ( ) ; // The block is called with load when the ...
它们会监听事件并作出相应的反应。 接下来的教程我不会告诉你如何把 Model 和 Collection 绑定到 View 上,而是主要讨论 View 是如何使用 javascript 模板库的,尤其是 Underscore.js’s _.template。 这里我们使用 ...
通过公开这两个视图,您可以完全控制 DOM 中发生的事情,并且还赋予您操作和监听其内部事件和状态变化的全部权力。 此外,顾名思义,它在构建时考虑了异步自动完成功能,但绝不是必需的。入门要使用选项和列表项的...
2015.2.17 index-pushstate.js 支持pushstate的前端路由变化监听 Routing 轻量简单的移动端SPA路由控制组件 带有route功能组件的框架很多,如 backbone.js、angular.js 但是它们都附带有自己的Controller甚至View...
当时我并不知道如何监听数据层到视图层的变化,于是没答上来,挂电话后,我赶忙查了下资料,主要思路有如下三种。 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定。所有绑定...
新增前端:requireJs+backbone+coffeescript+lesscss集成,自动编译coffeescript和lesscss并监听文件改动,因为时间原因主要以实现功能为主,欢迎大家指正和优化 框架地址:...
Cloudwalkers 平台版本使用 Backbone.js、Grunt、Bower 和 Requirejs 安装 安装 运行cd path/to/local/platform 运行sudo npm install -g grunt-cli bower 运行bower install以安装供应商依赖项。 运行npm ...
使用 Backbone.js、Grunt 和 Bower 的Superadmin应用程序 安装 安装 运行cd path/to/local/superadmin 运行sudo npm install -g grunt-cli bower 运行bower install以安装供应商依赖项。 运行npm install以安装...
从下周开始,我们将学习两个框架(Backbone 和 Angular),它们将使扩展这样的复杂应用程序变得更加容易。 目标 完成这个项目后,你应该有信心使用: HTML 和 CSS JavaScript! 下划线 jQuery - 监听器; 添加和...