gunn / Ember Auto
Programming Languages
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 [email protected]
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("[email protected]")
});
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