backbone中的事件绑定与解绑

本文探讨了Backbone.js中事件绑定的两种方式:on/off 和 listenTo/stopListening。使用on/off时,需在组件remove时手动解绑,以防出现zombie objects。而listenTo在视图销毁时会自动解绑,初始化时使用即可。文中通过源码分析和示例展示了如何在不同场景下正确使用这两种方法。
摘要由CSDN通过智能技术生成

背景:

公司有使用backbone进行维护的考古项目,事件绑定和解除绑定,有使用onoff进行绑定解绑的,也有使用listenTostopListening 进行绑定解绑的,着实让人摸不着头脑;

今天来探究一下这两种的区别以及正确的使用方法;

on/off 在backbone中正确使用姿势

对实例绑定之后,要在组件remove时候进行解绑

例子中对TodoList的change进行了监听,如果TodoList不存在了,当前onChange监听就变成了 zombie objects in JavaScript apps,需要手动在当前视图remove时候添加off

var Todos = new TodoList;
Backbone.View.extend({
  initialize: function () {
    this.input = this.$('#new-todo');
    this.allCheckbox = this.$('')[0];
    //this.listenTo(Todos, 'add', this.addOne);
    Todos.on('change', this.addOne, this); // 这里
    this.listenTo(Todos, 'reset', this.addAll);
    this.listenTo(Todos, 'all', this.render);

    this.footer = this.$('footer');
    this.main = $('#main');
    Todos.fetch();
  },
  remove: function() {
    // 单独移除某个绑定的事件
    Todos.off('change', this.addOne, this);
    // 如果要移除当前视图内容并移除绑定,调用下面的
    Backbone.View.prototype.remove.call(this);
  }
})

对于listenTostopListening来说,不需要手动去解绑,因为在视图销毁时,backbone中的destroy内部会自动调用stopListening, 解绑所有的事件;

所以对于listenTo来说,只需要在初始化时候进行监听就可以了

例子:

var Todos = new TodoList;
Backbone.View.extend({
  initialize: fu
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值