Question

I am trying to learn the new changes they did in Backbone 0.9.9.

Currently I got problems to understand the difference between listenTo and on:

listenTo

var View = Backbone.View.extend({

    tagName: "div",

    intialize: function() {
        this.listenTo(this.model, 'change', this.render);
    },

    render: function() {
        this.$el.empty();
        this.$el.append('<p>hello world</p>');
    }

});

on

var View = Backbone.View.extend({

    tagName: "div",

    intialize: function() {
        this.model.on('change', this.render, this);
    },

    render: function() {
        this.$el.empty();
        this.$el.append('<p>hello world</p>');
    }

});

I have heard that listenTo allows with stopListening to unsubscribe from all events when for example the view gets removed to avoid memory leaks.

Is this the only reason?

Answer 1

listenTo and stopListening came from the community, basically. They help to make it easier to bind and unbind events.

There’s a lot of existing documentation and blog posts surrounding the idea, including stuff that I’ve written on the subject.

Johnny Oshika is the first person that I saw using this technique. It was originally posted as an answer to a StackOverflow question here: Backbone.js : repopulate or recreate the view?

You can read what I’ve written about this, here:

• Backbone.EventBinder: Better Event Management For Your Backbone Apps
• Zombies! RUN! (Managing Page Transitions In Backbone Apps)
• Backbone.js And JavaScript Garbage Collection