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:
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.jsvar app = babel: optional: 'es7.decorators' ;
- 1.13.x
// ember-cli-build.jsvar app = babel: optional: 'es7.decorators' ;
Setup with addon
Add the following init
method to index.js
of your addon.
This should enable the decorators to work on the parent app/addon.
{ this_superinit && this_superinit; thisoptions = thisoptions || {}; thisoptionsbabel = thisoptionsbabel || {}; thisoptionsbabeloptional = thisoptionsbabeloptional || ; if thisoptionsbabeloptional === -1 thisoptionsbabeloptional; }
Application Usage
With Dependent Keys
In your application where you would normally have:
foo: Ember
You replace with this:
; // ..... <snip> .....@ { // Do Stuff}
Without Dependent Keys
foo: Ember
You replace with this:
; // ..... <snip> .....@computed { // Do Stuff}
"Real World"
;; Component;
"Real World get/set syntax"
;; Component;
"readOnly"
;; Component;
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.
;; Component;
Property Expansion
When a computed property key contains {foo,bar}
then the arguments that are
passed to the get
or set
method will get the expanded properties.
;; Component;
ember-data
;; Model;
Computed Macros
All of the computed macros are also available for use.
alias
Creates a new property that is an alias for another property on an object. Calls to get or set this property behave as though they were called on the original property.
;;Component;
and
A computed property that performs a logical and on the original values for the provided dependent properties.
;;Component;
bool
A computed property that converts the provided dependent property into a boolean value.
;;Component;
collect
A computed property that returns the array of values for the provided dependent properties.
;;Component;
empty
A computed property that returns true
if the value of the dependent property is null, an empty string, empty array, or empty function.
;;Component;
equal
;;Component;
filter
Filters the array by the callback.
The callback method you provide should have the following signature. item is the current item in the iteration. index is the integer index of the current item in the iteration. array is the dependant array itself.
;;Component;
filterBy
Filters the array by the property and value.
;;Component;
gt
A computed property that returns true
if the provided dependent property is greater than the provided value.
;;Component;
gte
A computed property that returns true
if the provided dependent property is greater than or equal to the provided value.
;;Component;
intersect
A computed property which returns a new array with all the duplicated elements from two or more dependent arrays.
;;Component;
lt
A computed property that returns true
if the provided dependent property is less than the provided value.
;;Component;
lte
A computed property that returns true
if the provided dependent property is less than or equal to the provided value.
;;Component;
map
Returns an array mapped via the callback
The callback method you provide should have the following signature. item is the current item in the iteration. index is the integer index of the current item in the iteration.
;
;;Component;
mapBy
Returns an array mapped to the specified key.
;;Component;
match
A computed property which matches the original value for the dependent property against a given RegExp, returning true
if they values matches the RegExp and false
if it does not.
;;Component;
max
A computed property that calculates the maximum value in the dependent array. This will return -Infinity
when the dependent array is empty.
;;Component;
min
A computed property that calculates the minimum value in the dependent array. This will return Infinity
when the dependent array is empty.
;;Component;
none
A computed property that returns true if the value of the dependent property is null or undefined. This avoids errors from JSLint complaining about use of ==
, which can be technically confusing.
;;Component;
not
A computed property that returns the inverse boolean value of the original value for the dependent property.
;;Component;
notEmpty
A computed property that returns true
if the value of the dependent property is NOT null, an empty string, empty array, or empty function.
;;Component;
oneWay
Where computed.alias
aliases get
and set
, and allows for bidirectional data flow, computed.oneWay
only provides an aliased get
. The set
will not mutate the upstream property, rather causes the current property to become the value set. This causes the downstream property to permanently diverge from the upstream property.
;;Component;
or
A computed property which performs a logical or on the original values for the provided dependent properties.
;;Component;
readOnly
Where computed.oneWay
provides oneWay bindings, computed.readOnly
provides a readOnly one way binding. Very often when using computed.oneWay
one does not also want changes to propagate back up, as they will replace the value.
This prevents the reverse flow, and also throws an exception when it occurs.
;;Component;
reads
This is a more semantically meaningful alias of computed.oneWay
, whose name is somewhat ambiguous as to which direction the data flows.
;;Component;
setDiff
A computed property which returns a new array with all the properties from the first dependent array that are not in the second dependent array.
;;Component;
sort
A computed property which returns a new array with all the properties from the first dependent array sorted based on a property or sort function.
The callback method you provide should have the following signature:
;
itemA
the first item to compare.
itemB
the second item to compare.
This function should return negative number (e.g. -1
) when itemA
should come before itemB
. It should return positive number (e.g. 1
) when itemA
should come after itemB
. If the itemA
and itemB
are equal this function should return 0
.
Therefore, if this function is comparing some numeric values, simple itemA - itemB
or itemA.get( 'foo' ) - itemB.get( 'foo' )
can be used instead of series of if
.
;;Component;
sum
A computed property that returns the sum of the value in the dependent array.
;;Component;
union
Alias for uniq.
;;Component;
uniq
A computed property which returns a new array with all the unique elements from one or more dependent arrays.
;;Component;
Installation
git clone <repository-url>
this repositorycd ember-computed-decorators
npm install
bower install
Running
ember serve
- Visit your app at http://localhost:4200.
Running Tests
npm test
(Runsember 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/.