Ember Auto

If you've used ember for a while, you'll be tired of writing this.get("property") everywhere in your code. E.g. from emberjs.com:

gravatarUrl: function() {
  var email = this.get('email'),
      size = this.get('size');

  return 'http://www.gravatar.com/avatar/' + hex_md5(email) + '?s=' + size;
}.property('email', 'size')

Wouldn't it be nice if instead of using strings to reference properties, they were just regular function arguments?

The Ember Auto Way

gravatarUrl: function(email, size) {
  return 'http://www.gravatar.com/avatar/' + hex_md5(email) + '?s=' + size;
}.auto("email", "size")

Or in coffeescript:

gravatarUrl: Em.Auto "email", "size", (email, size)->
  'http://www.gravatar.com/avatar/' + hex_md5(email) + '?s=' + size;

Use It

Just include ember-auto.js however you like:

<script type="text/javascript" src="ember.js"></script>
<script type="text/javascript" src="ember-auto.js"></script>

Use the ember-<1.5.0 branch for ember versions before 1.5.0. The master branch has most recently been updated for 1.6.1.

Is It Good?

Yes.

How Does it Work?

Ember Auto works by injecting the property's keys into it's function so you can use them like normal arguments:

var Person = Em.Object.extend({
  firstName: "Richard",
  message: function (loadedAt, name) {
    return "Hi " + name + ", you've been here since " + loadedAt;
  }.auto("App.loadedAt", "firstName")
});

There are many ways to set the keys, if func is a function to turn into an auto property, these are all valid:

Em.computed("prop.path", func).auto()
Em.auto("prop.path", func)
Em.auto(func).property("prop.path")
func.auto("prop.path")
func.property("prop.path").auto()

The values are injected into the function in the order that their keys were supplied to the auto property.

What about special keys?

Computed properties in ember can reference special keys like .@auto and .[]. The last non-special segment is what's passed through:

var World = Em.Object.extend({
  continents: [
    { name: "Africa"      population: 1022234000 },
    { name: "America"     population: 934611000 },
    { name: "Antarctica"  population: 4490 },
    { name: "Australasia" population: 29127000 },
    { name: "Asia"        population: 4164252000 },
    { name: "Europe"      population: 738199000 }
  ],

  totalPopulation: function (continents) {
    return continents.reduce(function(total, c) {
      return total + c.population;
    }, 0);
  }.auto("continents.@each.population")
});

Any caveats?

Currently Ember Auto doesn't support setting properties. So for now, just use the old style for properties you want to set.

Contribute

Ember Auto wants to stay light. If you think you can enhance it, please do! Improvements to this readme would be particularly appreciated.

Ember Auto uses node.js and grunt as a build system, these two libraries will need to be installed before starting.

Setup

git clone https://github.com/gunn/ember-auto.git
cd ember-auto
npm install

Build Ember Auto

grunt

Unminified and minified builds will be placed in the dist directory.

Run Unit Tests

To setup:

npm install -g bower
npm install -g grunt-cli
bower install

Then run grunt test to execute the test suite headlessly via phantomjs, or grunt develop to run tests in a browser - tests are available at http://localhost:8000/tests

gunn / ember-auto