I am writing an app in CoffeeScript where the main object is declared as this:
App =
Models: {}
Views: {}
Collections: {}
start: ->
console.log('started')
null
require ['models/question', 'views/question'], ->
new App().start()
null
This code compiles to javascript like this:
(function() {
var App;
App = {
Models: {},
Views: {},
Collections: {},
start: function() {
console.log('started');
return null;
}
};
require(['models/question', 'views/question'], function() {
new App().start();
return null;
});
}).call(this);
In the model code "required" in this program, the Coffeescript and its compilation look like this:
#Coffeescript
App.Model.Question = Backbone.Model.extend(
defaults : ->
question: "How're you"
)
//Javascript
(function() {
App.Model.Question = Backbone.Model.extend({
defaults: function() {
return {
question: "How're you"
};
}
});
}).call(this);
Because of the way that coffeescript compiles there are no global variables in the compiled code. So when the Question model page loads it throws an error: in the browser console:
Uncaught ReferenceError: App is not defined
I am not sure how to work around this, because I will have LOTS of references across modules in my project. How can I ensure visibility across modules - while working with coffeescript.
