View events are bound to the view's el
using the delegation form of jQuery's on
. That means that everything you mention in the view's events
object must be inside the view's el
or the event handlers won't be triggered.
By default, a view's el
is an empty <div>
and the view will create that <div>
when it needs to and bind the events to that <div>
. You might notice that you're not using this.el
or this.$el
anywhere in your code; your events are being bound properly but they're being bound to anything that you put in the DOM and so it looks like the events aren't working.
Two immediate possibilities arise:
Use
#app
as the view'sel
:class AppName.TitleView extends Backbone.View #... el: '#app' #... render: => @$el.html(@template) @
Do things the usual Backbone way and create an
el
just for your view:class AppName.TitleView extends Backbone.View #... render: => @$el.html(@template) @ v = new AppName.TitleView $('#app').append(v.render().el)
I'd recommend the latter as it is easier to manage and will help you avoid attaching multiple views to the same DOM element (and the zombies that tend to come from that).
Also, @template
is almost always a function so you want to say:
$('#app').html(@template())