Question

I am trying to learn Backbone js, and am having trouble understanding the difference between the event bindings using the underscore library provided bindAll/bind functions and jQuery provided on function. Here is an example in Coffeescript:

class Raffler.Views.Entry extends Backbone.View
  template: JST['entries/entry']
  tagName: 'li'

  events:
    'click': 'showEntry'

  initialize: ->
    @model.on('change',@render,this)
    @model.on('highlight',@highlightWinner,this)

  showEntry: ->
    Backbone.history.navigate("entries/#{@model.get('id')}", true)

  highlightWinner: ->
    $('.winner').removeClass('highlight')
    @$('.winner').addClass('highlight')

  render: ->
    $(@el).html(@template(entry: @model))
    this

This is a snippet of code from Ryan Bate's RailsCasts' on Backbone.js

Seems to me that the same code can be written using the underscore bindAll and bind functions as follows:

class Raffler....
  ...
  initialize: ->
    _bindAll @, 'render', 'highlightWinner'
    @model.bind 'change',@render
    @model.bind 'highlight',@highlightWinner
  ...

Questions:

1. Are these two functionally equivalent?
2. If yes then the jQuery code seems a lot clearer and more explicit. Is this just a matter of personal preference?

Thanks in advance for your time.

Bharat

Answer 1

jQuery’s “on” is used for a completely different purpose than Backbone’s “bind/bindAll”. The purpose of jQuery’s “on” is to call a function when an event occurs. The purpose of Underscore’s bind or bindAll is to bind a function to an object, meaning that whenever the function is called, the value of this will be the object you passed when calling bind. Underscore’s bindAll does the exact same thing as bind except with multiple functions at once.

You’ll find that these will be used together when building with Backbone. Lets say you have a model set up with a function which you call internally to modify the model. If you used jQuery’s or Backbone’s “on” function to bind that function to an event, when the event it triggered, this will be the DOM element which triggered the event meaning any references to this in that function will no longer work because this is not a model any more, it’s a dom element. However, if we were to call _.bind(this, callback) in the constructor of the model, it would ensure that this is always the model.

Backbone also implements an “on” function which is more similar to jQuery’s “on”, but used for Backbone events. It can be read about on the backbone docs