i'm erik.

Fri May 20

Tips for using CoffeeScript with SproutCore

CoffeeScript is all the rage these days. SproutCore is one of the prominent client-side JS frameworks (and my favorite). Here’s how to use them together.

  1. Create a SproutCore app

    sc-init Todos --template

  2. Get the sproutcore-coffeescript gem and add settings to your Buildfile.

    begin
  gem "sproutcore-coffeescript", "~> 0.1.4"
  require "sproutcore-coffeescript"
rescue LoadError
  puts "sproutcore-coffeescript not installed, please run:\n\n  gem install sproutcore coffeescript\n\n"
  exit
end

  3. Rename todos.js to todos.coffee

  4. Modify the SC boilerplate code to be CoffeeScript-compliant

  5. Get hacking!

CoffeeScript syntax tips:

SproutCore’s computed property definitions require you to call .property on a function object. This is the best way I’ve figured out how to do this with CoffeeScript:

( -> contents of function ).property('dependent properties')

You just need to wrap the function declaration in parenthesis in order to call the property function on it. The parenthesis can span multiple lines too:

( ->
  multiple()
  lines()
  ofCode()
).property('dependent properties')

Hope that helps!