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.
- 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.Component
s need to be ES6 classes so that the ES7 Decorators can decorate them.
- Install the addon
ember install ember-strong-attrs
- 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();
};
- 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
- Import the decorators into your component file.
import { requiredAttr, optionalAttr } from 'ember-strong-attrs';
The attrType
argument can be the following classes:
String
Number
Date
Function
YouCustomClass
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
}) { }
ember-strong-attr
exposes one function to declare strong attributes on
Ember.Component
declareStrongAttrs(attrsFunc, component)
, which returns the modifiedcomponent
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
}));