Basic CoffeeScript not firing events when run?

Question

I'm having real problems writing a simple Backbone.js app using CoffeeScript and Zepto.js

This is the simplest Backbone view yet the events don't fire. I get no errors in the console either? Where am I going wrong?

#Main view
class AppView extends Backbone.View

  constructor: ->    
    @el = $("#books")    
    @template = _.template("<div>New Item <a href='' id='addNew'> add new item</a></div>")

  events: {
      "click" : "createNew"
  }

  render: =>
    @el.html(@template())

  createNew : ->
    console.log "new"


#Onload
$(document).ready ->
   view = new AppView
   view.render()

I've been following the only example I can find of CoffeeScript & Backbone together https://github.com/bnolan/Backbone-Mobile/blob/master/application.coffee

However if I add super into my view code above I get an undefined error, his code does not.

Answer 1

The class Backbone.View has its own constructor that does plenty of work, and you are overriding it and not calling super. Bad.

Instead, Backbone.View provides you the ability to define your own constructor-type function called initialize. Perform all your setup there. Backbone.View#constructor will call initialize.

#Main view
class AppView extends Backbone.View

  initialize: ->    
    @el = $("#books")    
    @template = _.template(
      "<div>New Item <a href='' id='addNew'> add new item</a></div>"
    )

Answer 2

I had a similar problem (events not firing) and found that the problem was due to not setting @el. I set that:

@el: $("#content")

and it worked.