Functions in controller.js.coffee

Question

I'm having some trouble creating functions with CoffeeScript, I guess I've missed something. For my users controller I'd like to create client-side validation for a signup form. I think I've missed something fundamental with how this all works.

<%= form_for @user, :html => {:onsubmit => "return validate_signup_form();"} do |f| %>

CoffeeScript (assets/users.js.coffee):

validate_signup_form = () ->
    alert "Hi"
    return false

Expected output:

var validate_signup_form;
validate_signup_form = function() {
  alert("Hi");
  return false;
};
validate_signup_form();

Real output:

(function() {
  var validate_signup_form;
  validate_signup_form = function() {
    alert("Hi");
    return false;
  };
}).call(this);

A better approach to this is binding events to the fields, but if someone has a solution to this particular problem I'd be glad to hear it, it might come in handy some other time. — Emil Ahlbäck
– Emil Ahlbäck, Commented Jun 21, 2011 at 11:08
weird, the online coffeescript almost retrun what you expect. See: jashkenas.github.com/coffee-script — apneadiving
– apneadiving, Commented Jun 21, 2011 at 12:03
Yeah, something changes when Rails includes the file. Could be a feature. :) — Emil Ahlbäck
– Emil Ahlbäck, Commented Jun 21, 2011 at 12:46

polarblau · Accepted Answer · 2011-06-21 12:50:28Z

6

Actually everything works just as it's supposed to. As you can read here, Coffeescript wraps your code in an anonymous function to prevent the pollution of the global namespace. If you just glance at the examples, you might miss this, but the docs clearly state:

Although suppressed within this documentation for clarity, all CoffeeScript output is wrapped in an anonymous function: (function(){ ... })(); This safety wrapper, combined with the automatic generation of the var keyword, make it exceedingly difficult to pollute the global namespace by accident.

In order to access an object, variable or method declared within this artificial scope, you'll need to make it explicitly available within the global scope, e.g. like this:

window.validate_signup_form = validate_signup_form

In the case you're mentioning I'd definitely use events to trigger the method.

Btw.: No need for the empty parenthesis in your method declaration foo =-> works just fine.

answered Jun 21, 2011 at 12:50

polarblau

17.8k8 gold badges66 silver badges84 bronze badges

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

3 Comments

Emil Ahlbäck Over a year ago

Thanks for the clarification! Indeed I have only skimmed at the examples.

Elf Sternberg Over a year ago

"coffeescript --bare" will compile the code without the anonymous wrapper.

Trevor Burnham Over a year ago

Right, and here's how you can enable --bare in Rails. But don't do this! Here's why.

Community · Accepted Answer · 2017-05-23 10:08:08Z

3

polarblau's answer is quite correct. See also:

The closure wrapper is a great way of keeping files modular (as they should be), so I strongly advise against getting rid of it. Note that in the outer scope of your modules, this/@ is going to be window, so you can make your code work as intended by just adding a single character:

@validate_signup_form = ->
  alert "Hi"
  false

It's up to you whether you'd prefer to use @ or window. for defining globals, but the @ style has another advantage: If you reuse your code in a Node.js application, then it'll still work. Those objects will be attached to exports instead of window.

edited May 23, 2017 at 10:08

CommunityBot

11 silver badge

answered Jun 21, 2011 at 19:38

Trevor Burnham

77.5k33 gold badges165 silver badges200 bronze badges

Collectives™ on Stack Overflow

Functions in controller.js.coffee

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related