Question

Someone on the RubyRogues podcast once said “Learn CoffeeScript because CoffeeScript writes better javascript than you do.” Sorry, can’t remember who said it…

So, I took a very simple WORKING javascript function:

togglingii.js

function pdtogglejs(id) {   $('div .partybackground').removeClass("hidden");  }

Which is being called by this line:

<a href="#" class="dctoggle" onclick="pdtogglejs('partybackground')">Read More...</a>

Then I converted it into this coffeescript:
toggling.js.coffee

pdtogglecs(id) ->
   jQuery('div .partybackground').removeClass("hidden")

and changed the html to reference the pdtoggle*c*s instead of pdtoggle*j*s.

I can see BOTH of them just fine in my application.js file:

(function() {

  pdtogglecs(id)(function() {
    return jQuery('div .partybackground').removeClass("hidden");
  });

}).call(this);
function pdtogglejs(id) {   $('div .partybackground').removeClass("hidden");  }
;
(function() {



}).call(this);

However, only the pure javascript works. The coffeescript always returns Uncaught ReferenceError: pdtogglecs is not defined.

Based on other stackoverflow questions it must be some sort of namespace error. Probably because of the way pdtogglecs is, itself, inside of a function?? However, I have tried defining the coffeescript function with: window.pdtogglecs, this.pdtogglecs, root.pdtogglecs and the coffescript one always fails with that error.

What am I missing??

Thanks!!

Answer 1

You have two problems, one is a bit of CoffeeScript syntax confusion and the other is the namespace problem that you know about.

We’ll start by sorting out your syntax confusion. This:

f(x) -> ...

is interpreted like this:

f(x)(-> ...)

So when given this:

pdtogglecs(id) ->
   jQuery('div .partybackground').removeClass("hidden")

CoffeeScript thinks you’re trying to call pdtogglecs as a function with id as an argument. Then it thinks that pdtogglecs(id) returns a function and you want to call that function with your -> jQuery(...) function as an argument. So it ends up sort of like this:

callback = -> jQuery(...)
returned_function = pdtogglecs(id)
returned_function(callback)

And that’s nothing like your original JavaScript. You want to create a function named pdtogglecs which takes id as an argument and then runs your jQuery stuff:

pdtogglecs = (id) ->
    # -----^ this is sort of important
    jQuery('div .partybackground').removeClass("hidden")

You can see what’s going on by looking at the generated JavaScript.

The namespace problem is easy and you can probably figure that out based on the other question you found. However, I’ll take care of it right here for completeness.

CoffeeScript wraps each .coffee file in a self-executing function to avoid polluting the global namespace:

(function() {
    // JavaScript version of your CoffeeScript goes here...
})();

That wrapper makes everything scoped to the .coffee file. If you want to pollute the global namespace then you have to say so:

window.pdtogglecs = (id) -> ...

You can also say:

@pdtogglecs = (id) -> ...

but I prefer the explicitness of directly referencing window, that also saves you from worrying about what @ (AKA this) is when you’re code is parsed.