Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CoffeeScript always returns in anonymous function

I'm trying to write some CoffeScript function which checks all checkboxes in a table upon checking the checkbox in the th.

My function in CoffeeScript looks like this:

$("table.tableview th input:checkbox").live 'click', -> 
  checkedStatus = this.checked
  $("table.tableview tbody tr td:first-child input:checkbox").each ->
      this.checked = checkedStatus

It works great for checking all the boxes. However when unchecking it doesn't work. The compiled JS looks like this:

$("table.tableview th input:checkbox").live('click', function() {
  var checkedStatus;
  checkedStatus = this.checked;
  return $("table.tableview tbody tr td:first-child input:checkbox").each(function() {
    return this.checked = checkedStatus;
  });
});

It doesn't work because after the first one is set to false the return of the function will be false. I however have no clue how to suppress this default return behavior of coffee script. Please help.

When I add a "true" as per Flambino's suggestion I get the following JS

$("table.tableview th input:checkbox").live('click', function() {
    var checkedStatus;
    checkedStatus = this.checked;
    $("table.tableview tbody tr td:first-child input:checkbox").each(function() {
        return this.checked = checkedStatus;
    });
    return true;
});

The only way I can get the return statement inside the function is by putting it all the way like this:

$("table.tableview tbody tr td:first-child input:checkbox").each ->
    this.checked = checkedStatus
true

What am I doing wrong ? Thx for the help so far

like image 279
Gidogeek Avatar asked Aug 12 '11 15:08

Gidogeek


People also ask

What is the use of CoffeeScript?

CoffeeScript is a programming language that compiles to JavaScript. It adds syntactic sugar inspired by Ruby, Python, and Haskell in an effort to enhance JavaScript's brevity and readability. Specific additional features include list comprehension and destructuring assignment.

How do you write a function in CoffeeScript?

To define a function here, we have to use a thin arrow (->). Behind the scenes, the CoffeeScript compiler converts the arrow in to the function definition in JavaScript as shown below. (function() {}); It is not mandatory to use the return keyword in CoffeeScript.

How do I use CoffeeScript in HTML?

You simple need to add a <script type="text/coffeescript" src="app. coffee"></script> to execute coffee script code in an HTML file. In other cases, I've seen people use the attributes of type="coffeescript" and type="coffee" , so they might work for you as well. Save this answer.


2 Answers

If you just use return (or, equivalently, undefined) as the last line of a function, the CoffeeScript compiler will give you JS with no return at all. So the most efficient way of writing your code would be

$("table.tableview th input:checkbox").live 'click', -> 
  checkedStatus = this.checked
  $("table.tableview tbody tr td:first-child input:checkbox").each ->
    this.checked = checkedStatus
    return
  return

(You can safely do without the second return, of course. Only a return value of false has an effect in jQuery.)

There was also a proposed syntax (-/>) for defining a function with no return value; see issue 899.

like image 160
Trevor Burnham Avatar answered Oct 02 '22 20:10

Trevor Burnham


Just add a true as the last line of your function, and coffeescript will compile the JS to return that instead:

$("table.tableview th input:checkbox").live 'click', -> 
    checkedStatus = this.checked
    $("table.tableview tbody tr td:first-child input:checkbox").each ->
        this.checked = checkedStatus
    true

In other words, CoffeeScript always returns the result of the last line (like Ruby does)


Edit (after the question was updated):

Again, you can't keep CoffeeScript from returning the value of the last line in a function - part of the point of CoffeeScript is that it does exactly that.

CoffeeScript has significant whitespace, so indentation is what says what belongs together - your example is is actually correct:

$("table.tableview th input:checkbox").live 'click', -> 
    checkedStatus = this.checked
    $("table.tableview tbody tr td:first-child input:checkbox").each ->
        this.checked = checkedStatus
        true // cause this function (the each-iterator) to return true
    true // causes the click handler function to return true

There's no difference between this and just writing return true in a function like you would in javascript. You just use whitespace instead of {} to make code blocks.

like image 26
Flambino Avatar answered Oct 02 '22 22:10

Flambino