Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gunn/ember-auto
Nicer computed properties - less this.get("myField")
https://github.com/gunn/ember-auto
Last synced: about 2 months ago
JSON representation
Nicer computed properties - less this.get("myField")
- Host: GitHub
- URL: https://github.com/gunn/ember-auto
- Owner: gunn
- Created: 2013-10-03T07:50:11.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-08-28T03:34:10.000Z (over 10 years ago)
- Last Synced: 2023-04-18T04:19:41.651Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 263 KB
- Stars: 45
- Watchers: 4
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ember Auto [](https://travis-ci.org/gunn/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:
```javascript
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
```javascript
gravatarUrl: function(email, size) {
return 'http://www.gravatar.com/avatar/' + hex_md5(email) + '?s=' + size;
}.auto("email", "size")
```
Or in coffeescript:
```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:
```html
```
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:
```javascript
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:
```javascript
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](http://nodejs.org/) and [grunt](http://gruntjs.com/) as a build system, these two libraries will need to be installed before starting.
### Setup
```bash
git clone https://github.com/gunn/ember-auto.git
cd ember-auto
npm install
```
### Build Ember Auto
```bash
grunt
```
Unminified and minified builds will be placed in the `dist` directory.
### Run Unit Tests
To setup:
```bash
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