Event Listeners in Backbone View are not being added to objects in the DOM

Question

I've been struggling through my first Backbone app and have started to get the hang of things. I now have a few successful reports that load JSON data from my server (NodeJS), populate a template (Handlebars), and render relatively nicely on the frontend.

The issue I'm running into is that I'm trying to add event handlers to a <select> object coming in from one of my templates and I'm not having much luck.

Here's the template:

// Report - New Clients

script(type='text/x-handlebars-template', id='newClients-template')
  // Start Listing
  {{#each report}}
  .listingName
    .youSearched
      | Stylist:
    .srchResult
      select.chzn-select(id='stylists', style='width:350px')
        option(value='null') All Stylists
        {{#each stylists}}
        option(value='{{uid}}') {{name}}
        {{/each}}
  .clear

And here's the Backbone View: note: I'm calling the view from within a $ -> so it shouldn't be loading until DocumentReady

  # View
  class window.NewClientsView extends Backbone.View

    events: 
      'click #stylists': 'selectStylist'
  
    initialize: ->
      @el = $('.containerOuter')
      _.bindAll this, 'render'
      @collection.bind 'reset', @render

      # Compile Handlebars template at init (Not sure if we have to do this each time or not)
      source = $('#newClients-template').html()
      @template = Handlebars.compile source

      # Get the latest collections
      @collection.fetch()

    render: ->
      # Render Handlebars template
      renderedContent = @template { report: @collection.toJSON() }
      $(@el).html renderedContent

      return this

    selectStylist: (e) ->
      console.log 'hit it!'
      console.log e

I'm expecting that any time the dropdown is clicked or changed, I'll see the selectStylist function fired. Unfortunately that hasn't happened yet :( I also have inspected the element in Chrome Dev Tools and there are no event listeners set on the object.

I've been stuck on this for a bunch of hours now and have reviewed all the other suggestions for Backbone event listeners (i.e. pass in your this.el as a parameter when instantiating your view), but haven't had any success.

Any help or ideas would be appreciated!

Answer 1

In initialize, you write

@el = $('.containerOuter')

But Backbone.js processes events before initialize—meaning that it's already bound those events to a different @el (which you should see in the DOM as a lonely div).

You can hack this by overriding make, the function that's used to create @el:

make: ->
  $('.containerOuter')[0]