coffeescript Class not accessible in main javascript

Question

I have a class written in coffeescript, e.g.,

class Example
  constructor: ->
    $.each [1, 2, 3], (key, value) =>
      @test = value
    return @test
  render: ->
    alert @test

and I have this class as a separate file, Example.coffee

Now I want to be able to instantiate in my main javascript file like so:

d = new Example
d.render()

but the class is undefined even when it is included as a script on the page, like

<script src="Example.js></script>
<script src="main.js"></script>

How do you make the class publicly available to the main file?

Flagged as duplicate: stackoverflow.com/questions/9287510/… — Aaron Dufour
– Aaron Dufour, Commented Apr 10, 2012 at 20:42

mu is too short · Accepted Answer · 2013-11-24 17:20:45Z

28

You can declare your class to be globally accessible (at least for browsers) by declaring it to be in the window namespace:

class window.Example
  constructor: ->
    $.each [1, 2, 3], (key, value) =>
      @test = value
    return @test
  render: ->
    alert @test

That will put Example straight into window. You can also say class @Example in most cases.

By default, CoffeeScript wraps each file in a (function() { ... })() wrapper to prevent namespace pollution. You can prevent this by supplying -b when compiling your CoffeeScript:

-b, --bare
Compile the JavaScript without the top-level function safety wrapper.

but that might not be an option for you (or it might be an ugly one). The usual approach is to declare an application specific namespace somewhere before your classes are loaded:

// Probably in a <script> in your top-level HTML...
App = { };

and then namespace your classes appropriately:

class App.Example
    #...

Then refer to everything through the App namespace.

edited Nov 24, 2013 at 17:20

answered Apr 10, 2012 at 18:17

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael De Silva Over a year ago

Is there anyway to setup the namespace without having to resort to a script tag? Didn't get very far in my attempts. Thanks!

mu is too short Over a year ago

@MichaeldeSilva: In a browser environment you can say things like @App ?= { } before your classes to initialize window.App if it isn't already around. Or you could say class @C to put your classes in the global scope if that fits. Or you could use a module system like require.js.

Andrew E · Accepted Answer · 2014-06-22 15:17:24Z

13

I know this is an old thread, but in case anyone else finds it useful, declare your class with "@" and it will be accessible to .js files outside of the .coffee file.

So, in example.coffee:

class Introverted
  honk: ->
    alert "This class is visible within the .coffee file but not outside"

class @Extroverted
  honk: ->
    alert "This class is visible inside and outside of the .coffee file"

That is compiled to example.js which can then be used in example.html:

<script src="example.js"></script>
<script>
var p = new Extroverted(); // works fine
p.honk();

var i = new Introverted(); // will fail with "Introverted is not defined"
i.honk();
</script>

answered Jun 22, 2014 at 15:17

Andrew E

8,4654 gold badges47 silver badges47 bronze badges

2 Comments

Nick Over a year ago

This is effectively the same as mu is too short's answer. The @Extroverted will compile to this.Extroverted, which is effectively the same as window.Extroverted in this case.

markquezada Over a year ago

Just to add to Nick's comment above, in case anyone is wondering... the reason why this works is because @ is a shortcut for this. in coffeescript. And like he says, in the above context this is window so you're attaching Extraverted to window, effectively making it global.

Raynos · Accepted Answer · 2012-04-10 17:52:34Z

4

Create a global variable

window.Example = Example

answered Apr 10, 2012 at 17:52

Raynos

170k57 gold badges359 silver badges399 bronze badges

Collectives™ on Stack Overflow

coffeescript Class not accessible in main javascript

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related