Backbone js .listenTo vs .on

by

listenTo is the newer and better option because these listeners will be automatically removed for you during stopListening which is called when a view gets removed (via remove()). Prior to listenTo there was a really insidious problem with phantom views hanging around forever (leaking memory and causing misbehavior) because view methods were referenced as event listeners on models even though the view instances themselves were long gone and no longer in the DOM.

If you want to read the back story for listenTo, search the backbone github repository for listenTo and read through some of the longer issue discussions.

As to the default context, several things can end up bound to this:

  • if you do the binding via this.listenTo, it will always be the view instance (pointed out by Wim Leers in the comments)
  • without this.listenTo, the story gets complicated
    • For misc events, it will be the global object (best to avoid this)
    • for DOM events, it will be the source element just like in regular DOM event binding
    • If you provide an explicit context (the 3rd argument to foo.on), backbone will use that (thus this is a more robust approach)
    • If you use the ECMA standard function () {//your event handler}.bind(this), you can also manually control the context (also recommended)
    • As @mu pointed out, _.bind or $.proxy are available alternatives to ECMA function.bind
    • For backbone views, doing this.bindAll('onClick', ...) will ensure the view instance is the this context when any view methods are used as event handlers
  • any events wired up by using the view’s standard events property will get bound for you automatically to the view instance by backbone (this is belt & suspenders with bindAll)

So to summarize into some guidelines:

  • use the events property whenever possible as it is concise and correct
  • use this.listenTo for all bindings to models and collections
  • any additional bindings remember to bind the context reliably using your preferred method. I usually use ECMA Function.bind because hey, standards, but there are several good options here.

More Related Contents:

  1. Backbone, not “this.el” wrapping
  2. Webpack ProvidePlugin vs externals?
  3. How do I trigger the success callback on a model.save()?
  4. Backbone.js event after view.render() is finished
  5. Backbone: Refresh the current route
  6. Backbone.js – change not triggering while the name change
  7. Proper way of doing view mixins in Backbone
  8. Underscore template throwing variable not defined error
  9. Explanation of …
  10. Best way to iterate over an array without blocking the UI
  11. How to override Backbone.sync?
  12. Backbone.js Empty Array Attribute
  13. Trying to parse `request.body` from POST in Django [duplicate]
  14. Error: getaddrinfo ENOTFOUND in nodejs for get call
  15. “Single-page” JS websites and SEO
  16. Backbone.js and pushState
  17. Backbone: event lost in re-render
  18. Backbone.js get and set nested object attribute
  19. Backbone 0.9.9: Difference between listenTo and on
  20. In Javascript, what does this underscore mean?
  21. Delete multiple records using REST
  22. start javascript code with $(function, etc
  23. Reverse sort order with Backbone.js
  24. backbone.js structuring nested views and models
  25. Backbone.js view inheritance
  26. Backbone.js : change not firing on model.change()
  27. fire an event from one view to another in backbone
  28. Computed properties in Backbone
  29. Backbone.js Event Binding
  30. How to capture the key event from a view?

Leave a Comment