Running a CoffeeScript Class on document.ready

Question

i have

class Main
   test:->
      alert "yay!"

in coffeescript, and i want to run that inside my index.html

<script>
    $(function(){
        //and obv Main.test(); doesn't work
    });
</script>

there is a note of this on the website, it says it wouldn't work. But I couldn't find how to make it work. any ideas? i need to find out what coffeescript closure wrapper is.

or does coffeescript execute after document.ready anyway?

thx!

The answer here explains the global scope with coffee script very well: http://stackoverflow.com/questions/4214731/coffeescript-global-variables — Marc, Sep 12 '12 at 08:08

Brandon · Answer 1 · 2014-09-26T05:13:02.007

To execute Coffeescript after document.ready you can use jQuery like this:

$ ->
  # Put your function code here
  init()

What that is doing is running jQuery(function () { callback... }) like the 3rd section at this link: http://api.jquery.com/jQuery/

Which basically says this:

jQuery( callback ) Returns: jQuery Description: Binds a function to be executed when the DOM has finished loading.

I declare all my classes, etc outside of document ready and then call an init function to get it running at the appropriate time.

I hope that helps!

score 24 · Accepted Answer · answered Jan 12 '11 at 01:08

24

class Main

Try class @Main instead.

obv Main.test(); doesn't work

Right. Should be new Main().test() or Main::test().

does coffeescript execute after document.ready anyway?

Assuming that you're executing it via extras/coffee-script.js and using jQuery, yes.

answered Jan 12 '11 at 01:08

matyr

5,774
28
22

3

just a little help for future readers of this question, if you include .coffee directly and compiling them with coffee.js, a race condition occurs, and it doesn't work (if you compile with CLI, it's all fine) so to get this to work, I did: $(function(){ setTimeout(function(){ new Main() },1000); }); hope it helps. – Devrim Jan 12 '11 at 20:23

score 9 · Answer 3 · answered Feb 06 '11 at 06:02

Coffeescript wraps your code in a function call so you can't accidentally overwrite global variables.

If you want any variables, functions or classes to be global (so they can be accessed by other files), you need to explicitly make them global by attaching them to this or window.

# Stays within the function scope, so you can't access it outside the file
myNotGlobalFunction -> return

# Attaches it to `this` aka `window`, so can be accessed globally
this.myGlobalFunction -> return

# A shortcut using @ which is an alias to `this.`
@myOtherGlobalFunction -> return

This compiles to:

(function() {
  myNotGlobalFunction(function() {
    return;
  });
  this.myGlobalFunction(function() {
    return;
  });
  this.myOtherGlobalFunction(function() {
    return;
  });
}).call(this);

score 0 · Answer 4 · answered Oct 01 '12 at 16:23

I've run into this issue before as well. First of all, since you are defining a class, you need to instantiate it. Then you can call you test function on the instance:

<script>
    $(function(){
        var an_instance_of_main = new Main();
        an_instance_of_main.test();
    });
</script>

However, you might have noticed that the browser can't find your Main class. This is because when the CoffeeScript is compiled, it wraps a self-executing function around your class definition in order to prevent Main from being globally accessible. If you want to make it globally accessible, you can prefix it with window:

class window.Main
   test:->
      alert "yay!"

or assign it after defining it:

class Main
   test:->
      alert "yay!"

window.Main = Main

Running a CoffeeScript Class on document.ready

4 Answers4