Comments on: Playing with CoffeeScript

By: Billy Moon

Billy Moon — Fri, 11 Mar 2011 19:17:06 +0000

I also figured out a way to get coffee script to work inline within the page’s javascript.

Forums suggest some concern about compatibility with some old browsers – I have not tested them all.

Main benefit I am looking at is to be able to use coffee script to build complex data objects, or anywhere else where it seems more convenient, and still have the ability to jump back into javascript/jQuery where I can copy and paste code from millions of forums.

This is not the recommended method for implementation – where a compiled source is more appropriate, but very nice for development.

Example of inline CoffeeScript: http://pastebin.com/CkgCvqcR

By: Billy Moon

Billy Moon — Fri, 11 Mar 2011 18:24:23 +0000

I love the article – I was just starting the same learning curve as I came across this artcle. I only heard about Raphael yesterday, and coffeescript today – so it was a perfect way to try to get familiar with them both.

I read through the comments, and I tried to implement some of the ideas. I used @ where I could, and got rid of tons of brackets. I also used the fat arrows for the click handlers so that the @ does not get lost in the $ object. I am sure it can be slimmed down more – but I am quite impressed with how clean it looks now compared to how it started off!

Here is the slimmed down version: http://pastebin.com/tdMLsXUB

Keep up the good work!

By: jashkenas

jashkenas — Fri, 26 Feb 2010 20:04:20 +0000

Right — when you pass the “app.init” function into jQuery (binding it to document.ready), you’re pulling the function off of the “app” object, and it loses its sense of “this”. So, another way to go is to keep your single init, and replace the final line with this:

$(-> app.init())

By: korny

korny — Fri, 26 Feb 2010 00:06:39 +0000

In fact, I can clean everything up by putting in a second init, and then I can use ‘@’ (which is an alias for ‘this.’
app: { init: -> app.__init() __init: @paper: Raphael('playspace',320,200) @draw_circle() @draw_square()
Nice!

By: korny

korny — Fri, 26 Feb 2010 00:02:20 +0000

Thanks – that works!
I’m still confused around how ‘this’ works – it’s not really a Coffeescript thing, more of a Javascript thing.
For example, in my code above, I can change references in ‘app.draw_circle’ to use ‘this’ and they get ‘app’. Which makes sense, as they are called as ‘app.draw_circle()’
But I can’t change references in ‘app.init’ to use ‘this’, for some reason the JQuery call ‘$(app.init)’ doesn’t set ‘this’ to ‘app’… I think that’s where a lot of my confusion started, as I’d change something in ‘draw_circle’ and it would work, then I’d change it in ‘init’ and it wouldn’t!

By: jashkenas

jashkenas — Thu, 25 Feb 2010 12:59:29 +0000

Nice writeup. It’s very cool to see an example of using Raphael from CoffeeScript.

The problem that you had with “this” is one of my least favorite parts of JavaScript. Unlike everything else in JS (which has proper lexical scope), the value of “this” within a function is the object that the function has been attached to.

The benefit is that you can pull a function off one object and attach it to another, and it’ll work seamlessly. The downside is that if you pull a function off an object, say, to hand it to a click handler, it loses its notion of identity and it’s former value for “this”.

The common way to address it is to set a local variable to “this” from the outside, and reference it through the closure, instead of “this”. So, your original:

$(circle.node).click (e) -> this.kick e

Becomes:

me: this
$(circle.node).click (e) -> me.kick e

Which will work properly. However, CoffeeScript provides a convenience for defining functions that are bound to the current value of “this”, right on the spot where they’re declared, for use in cases like these.

http://jashkenas.github.com/coffee-script/#fat_arrow

Using the fat arrow, the example becomes:

$(circle.node).click (e) => this.kick e

Hope that helps.