ember-strong-attrs

ember-strong-attrs is an addon that facilitates the declaration of Ember.Component required and optional attributes. It extends Ember.Component and provides ES7 Decorators to declare required and optional attributes.

Caveats

• Experimental. This is alpha software, and we think it's a cool idea but not sure if it's a good idea yet.
• You need to enable ES7 Decorators in Babel.
• JSHint does not support ES7 Decorators at the moment so you will get JSHint errors like this: Unexpected '@'.. To avoid this, you can tell jshint to ignore your decorators for now, as shown in the examples below.
• Your Ember.Components need to be ES6 classes so that the ES7 Decorators can decorate them.

Setup

1. Install the addon

ember install ember-strong-attrs

1. Update your ember-cli-build.js to enable Babel's ES7 Decorators

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
module.exports = function(defaults) {
  defaults.babel = {
    optional: ['es7.decorators']
  };
 
  var app = new EmberApp(defaults, {});
 
  return app.toTree();
};

1. Update the components you want to declare required/option attributes on to use ES6 Classes syntax.

Given the following Ember.Component definition:

import Ember from 'ember';
 
export default Ember.Component.extend({
  // ... your methods and props
});

You will get the following using ES6 Classes syntax

import Ember from 'ember';
 
export default class extends Ember.Component.extend({ // Note the class keyword
  // ... your methods and props
}) { } // Don't forget the trailing { } and the removal of the semicolon

1. Import the decorators into your component file.

import { requiredAttr, optionalAttr } from 'ember-strong-attrs';

API

Supported Attribute types

The attrType argument can be the following classes:

• String
• Number
• Date
• Function
• YouCustomClass

Decorators

ember-strong-attrs exposes two decorators:

• @requiredAttr(attrName, attrType)
• @optionalAttr(attrName, attrType)

Example:

import Ember from 'ember';
import { requiredAttr, optionalAttr } from 'ember-strong-attrs';
import Person from '../models/person';
 
// Note the lack of semicolons behind the decorators
/* jshint ignore: start */
@requiredAttr('myRequiredAttr', String)
@optionalAttr('myStringAttr', String)
@optionalAttr('myPersonAttr', Person)
/* jshint ignore: end */
export default class extends Ember.Component.extend({
  // ... your methods and props
}) { }

ES6 Compatible

ember-strong-attr exposes one function to declare strong attributes on Ember.Component

• declareStrongAttrs(attrsFunc, component), which returns the modified component that was passed in.

Example:

import Ember from 'ember';
import { declareStrongAttrs } from 'ember-strong-attrs';
import Person from '../models/person';
 
export default declareStrongAttrs(function() {
  this.requiredAttr('myRequiredAttr', String);
  this.optionalAttr('myOptionalAttr', String);
  this.requiredAttr('myPersonAttr', Person);
}, Ember.Component.extend({
  // ... your methods and props
}));