Question

I am new to Backbone + Coffeescript + Rails and I’m stuck in initializing the application. The main_app.js.coffee is:

#= require_self
#= require_tree ./templates
#= require_tree ./models
#= require_tree ./views
#= require_tree ./routers

class window.BackofficeApp
  Models: {}
  Collections: {}
  Routers: {}
  Views: {}

  sanity:-> true

  constructor: ->
        console.log "go backofficeapp!"
        new BackofficeApp.Router()
        try
            Backbone.history.start()

The router is still pretty simple:

class BackofficeApp.Router extends Backbone.Router

    routes:
        "": "index",
        "users": "users",
        "csense": "csense"

    index: ->
        console.log "index called from router!"
        view = new BackofficeApp.Views.IndexView()
        $('#main-app').html(view.render().el)

    users: ->
        console.log "users"

    csense: ->
        console.log "contentsense!"

And the IndexView as well:

class BackofficeApp.Views.IndexView extends Backbone.View    

    render: ->
        template = JST['index_view']
        $(@el).html(template);
        console.log "index called from indexview!"
        this

Everything starts in jQuery (doc ready):

jQuery ->
    new BackofficeApp()

But we are seeing the following msgs / error in the console:

Uncaught TypeError: Cannot read property 'IndexView' of undefined
go backofficeapp!
index from router! 

If I take the .Views out of IndexView class declaration, it works… However, as the app is medium to large, we would like to use 2 (or more) levels in naming the classes.

What are we doing wrong?

Answer 1

This doesn’t do what you think it does:

class window.BackofficeApp
  Models: {}
  Collections: {}
  Routers: {}
  Views: {}

That will create window.BackofficeApp but Models, Collections, … will be attached to BackofficeApp.prototype rather than BackofficeApp itself. The JavaScript version is like this:

window.BackofficeApp = (function() {
  function BackofficeApp() {}
  BackofficeApp.prototype.Models = {};
  BackofficeApp.prototype.Collections = {};
  BackofficeApp.prototype.Routers = {};
  BackofficeApp.prototype.Views = {};
  return BackofficeApp;
})();

I think you want to make Models and friends class properties:

class window.BackofficeApp
  @Models: {}
  @Collections: {}
  @Routers: {}
  @Views: {}

That will create BackofficeApp.Models, BackofficeApp.Collections, … so that you can say:

class BackofficeApp.Views.IndexView extends Backbone.View
  #...

without seeing TypeErrors.