serchavalos/ember-decorators

Useful decorators for Ember applications.

ember-decorators

This addon adds decorator support to Ember, allowing you to DRY-up your code and write modern ES6 classes.

More details:

• javascript-decorators proposal
• babel blog post

Usage

Installation

ember install ember-decorators

If you're using ember-decorators in an addon, pass the -S option to save this as a dependency as opposed to the default devDependency:

ember install -S ember-decorators

Application Usage

In your application where you would normally have:

import Ember from 'ember';

export default Ember.Component.extend({
  foo: Ember.inject.service(),

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

    return `${someKey} - ${otherKey}`;
  }),

  actions: {
    handleClick() {
      // do stuff
    }
  }
})

You replace it with this:

import Component from '@ember/component';
import { action, computed } from 'ember-decorators/object';
import { service } from 'ember-decorators/service';

export default class ExampleComponent extends Component {
  @service foo

  @computed('someKey', 'otherKey')
  get bar() {
    const someKey = this.get('someKey');
    const otherKey = this.get('otherKey');
    return `${someKey} - ${otherKey}`;
  }

  @action
  handleClick() {
    // do stuff
  }
}

The packages in ember-decorators are setup to mirror Ember's javascript module API. Decorators can be imported from the packages that they belong to:

import {
  attr,
  hasMany,
  belongsTo
} from 'ember-decorators/data';

import {
  controller
} from 'ember-decorators/controller';

import {
  action,
  computed,
  observes
} from 'ember-decorators/object';

import {
  alias,
  or,
  reads
} from 'ember-decorators/object/computed';

import {
  on
} from 'ember-decorators/object/evented';

import {
  service
} from 'ember-decorators/service';

See the API Documentation for detailed examples and documentation of the individual decorators.

Note: The @computed decorator wraps ember-macro-helpers which provides a lot of helpful features on top of standard computeds. It is highly recommended that you read the documentation for that addon as well.

Installation

• git clone <repository-url> this repository
• cd ember-decorators
• npm install
• bower install

Running

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

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

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