Ember.js-Infused CoffeeScript

EmberScript is a CoffeeScript derived language that has first-class support for the Ember.js runtime. It also has all of the syntactical goodness of the original Coffeescript, compiles directly into JavaScript, and can be used outside of Ember applications!

class PostsController extends Ember.ArrayController

  trimmedPosts: ~>
    @content?.slice(0, 3)

  +observer content.@each
  postsChanged: ->

EmberScript on the left, JavaScript on the right. All examples are editable!

Getting Started

Ruby on Rails

If you are using Rails as your backend, simply add the following to your Gemfile:

gem 'ember_script-rails'

All assets ending in .em will be compiled by EmberScript.


sudo npm install -g 'git://github.com/ghempton/ember-script.git#HEAD'
ember-script --help

Language Reference

EmberScript shares much of its syntax with CoffeeScript. For basic CoffeeScript syntax, please consult the CoffeeScript reference

Object Model

EmberScript replaces the CoffeeScript class and extends keyword with the equivalent from Ember's object model. The mixin keyword is also introduced:

mixin CanFly
  fly: -> console.log('flying')

class Animal

class Bird extends Animal with CanFly

  fly: ->
    console.log('flap wings')

Computed Properties and Observers

An annotation based syntax is used to declare computed properties and observers:

class Person

  +computed firstName, lastName
  initials: -> "#{@firstName.split('')[0]}, #{@lastName.split('')[0]}"

  +observer name
  nameChanged: -> console.log("new name: #{@name}")

  favoriteNumber: -> Math.round(Math.random() * 10)

Dependency Inference

Dependencies of computed properties can be inferred at compile time. This includes enumerables and complex statements. The ~> operator is used to define computed properties with inferred dependencies:

class Person

  name: ~> "#{@firstName} #{@lastName}"

  postsDisplay: ~>
    if @posts.length > 0
      "#{@posts.length} Posts"
      "No Posts"

  something: ~>
    x = @x
    y = x.y

Properties and Accessors

By default, all property accesses are deferred to Ember's get and set methods. To use normal javascript property access, use the *. operator:


person.firstName = "Wes"
person.address.city = "San Diego"

@person.firstName = "Andrew"

person*.firstName = "Manuel"

Other EmberScript Resources

Who's Using EmberScript?

Fork me on GitHub