ember-computed-decorators

ember-computed-decorators

This addon allows usage of the proposed decorator syntax, and passes the specified dependent keys into your computed function making your computed properties much DRY'er.

More details:

• javascript-decorators proposal
• babel blog post

Usage

Babel Setup

To use ember-computed-decorators you must update Babel's configuration to allow usage of the decorator proposal.

As of Babel 5.1.0 the following should be all you need in your ember-cli application:

• pre-1.13.0

// Brocfile.js
var app = new EmberApp({
  babel: {
    optional: ['es7.decorators']
  }
});

• 1.13.x

// ember-cli-build.js
var app = new EmberApp({
  babel: {
    optional: ['es7.decorators']
  }
});

Application Usage

With Dependent Keys

In your application where you would normally have:

foo: Ember.computed('someKey', 'otherKey', function() {
  var someKey = this.get('someKey');
  var otherKey = this.get('otherKey');

  // Do Stuff
})

You replace with this:

import computed from 'ember-computed-decorators';

// ..... <snip> .....
@computed('someKey', 'otherKey')
foo(someKey, otherKey) {
  // Do Stuff
}

Without Dependent Keys

foo: Ember.computed(function() {
  // Do Stuff
})

You replace with this:

import computed from 'ember-computed-decorators';

// ..... <snip> .....
@computed
foo() {
  // Do Stuff
}

"Real World"

import Ember from 'ember';
import computed from 'ember-computed-decorators';

export default Ember.Component.extend({
  @computed('first', 'last')
  name(first, last) {
    return `${first} ${last}`;
  }

});

"Real World get/set syntax"

import Ember from 'ember';
import computed from 'ember-computed-decorators';

export default Ember.Component.extend({
  @computed('first', 'last')
  name: {
    get(first, last) {
      return `${first} ${last}`;
    },

    set(value, first, last) {
      // ...
    }
});

"readOnly"

import Ember from 'ember';
import computed, { readOnly } from 'ember-computed-decorators';

export default Ember.Component.extend({
  @readOnly
  @computed('first', 'last')
  name(first, last) {
    return `${first} ${last}`;
  }
});

Enumerables / Arrays

When a computed property key contains @each, [] (enumerable) then the argument that is passed to the get or set method will be the object at the path up to the @each or [] part.

import Ember from 'ember';
import computed from 'ember-computed-decorators';

export default Ember.Component.extend({
  persons: [
    { first: 'David', last: 'Heinemeier Hansson' },
    { first: 'Aaron', last: 'Patterson' }
  ]

  @computed('persons.@each.{first,last}')
  names(persons) {
    return persons.map((person) => `${person.first} ${person.last}`);
  }
});

Property Expansion

When a computed property key contains {foo,bar} then the arguments that are passed to the get or set method will bet the expanded properties.

import Ember from 'ember';
import computed from 'ember-computed-decorators';

export default Ember.Component.extend({
  address: {
    street: 'Pennsylvania Avenue',
    number: 1600
  ]

  @computed('address.{street,number}')
  formattedStreet(street, number) {
    return `${number} ${street}`;
  }
});

ember-data

import DS from 'ember-data';
import {
  attr,
  hasMany
} from "ember-computed-decorators/ember-data";

export default DS.Model.extend({
  @attr firstName,
  @hasMany users
});

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.