Backbone的监听事件

作者: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的监听事件

你可能感兴趣的:(JavaScript,backbone)