Question

Here’s my CoffeeScript code:

$(document).ready ->
  SearchView = Backbone.View.extend
    tagName: "form"
    className: "search"
    events: {
      "click label":"search"
    }
    search: ->
      console.log("HERE")

  searchView = new SearchView()

And here’s my HTML:

%form#search.search
  %label
    Search
  %input

But clicking the form is not triggering any events. Any ideas why?

Answer 1

You misunderstand how tagName and className work. When you set these:

tagName: "form"
className: "search"

That just means that you’ll have <form class=​"search">​</form>​ in @el. Those settings don’t bind your view to what the form.search selector matches and you never add @el to the DOM so your events don’t end up bound to anything at all.

If you want to use tagName and className then you’ll want a render to flesh out your form:

render: ->
    $(@el).append('<label>Search</label><input>')
    @

And then you’d call render and add el to the DOM with something like this:

searchView = new SearchView()
$('div').append(searchView.render().el) # 'div' is just an example of course

Demo: http://jsfiddle.net/ambiguous/ubqqE/

If you wanted to bind to existing HTML then you could use el instead of tagName and className like this:

SearchView = Backbone.View.extend
    el: '#search'
    #...

Demo: http://jsfiddle.net/ambiguous/FfDg6/