Keep your app code DRY and copypasta free with computed property macaronis (macros) for Ember.js 1.13.x and greater.
Computed property macros (CPM) are great for DRYing up your code, and Ember.js ships with a few handy computed macros. This addon adds a few more functional-style macros, and can be thought of as the "lodash equivalent" of Ember CPM libraries.
Chaining is not supported... yet.
First, import the macro(s) you need, or the whole thing:
import { findKey } from 'ember-macaroni'; // imports a named macro
import macros from 'ember-macaroni'; // imports all the things
const { find } = macros; // destructuring
export default Ember.Component.extend({
items: null,
selectedId: null,
selectedItem: findKey('items', 'id', 'selectedId'),
hansel: find('items', 'name', 'Hansel'),
init() {
this.items = [
{ id: 1, name: 'Derek Zoolander' },
{ id: 2, name: 'Hansel' },
{ id: 3, name: 'Mugatu' }
];
},
actions: {
selectPerson(id) {
Ember.set(this, 'selectedId', id);
}
}
});Returns an array with just the items that are contained in another array.
@param {String} collectionKeyThe key name for the collection@param {String} propNameThe key name for the property to filter by@param {Array} valuesThe array of values to filter
Ember.Object.extend({
items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }],
selectedId: 1,
selectedItem: filterContains('items', 'id', [1]) // [{ id: 1, name: 'foo' }]
});Returns an array with just the items with the matched property.
@param {String} collectionKeyThe key name for the collection@param {String} propNameThe key name for the property to filter by@param {String} valueKeyThe key name that returns the value to filter
Ember.Object.extend({
items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }],
selectedId: 1,
selectedItem: filterKey('items', 'id', 'selectedId') // [{ id: 1, name: 'foo' }]
});Returns the first item with a property matching the passed value from a dependent key.
@param {String} collectionKeyThe key name for the collection@param {String} propNameThe key name for the property to find by@param {String} valueKeyThe key name that returns the value to find
Ember.Object.extend({
items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }],
selectedId: 1,
selectedItem: findKey('items', 'id', 'selectedId') // { id: 1, name: 'foo' }
});Returns the first item with a property matching the passed value.
@param {String} collectionKeyThe key name for the collection@param {String} propNameThe key name for the property to find by@param {*} valueThe value to match`
Ember.Object.extend({
items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }],
selectedItem: find('items', 'id', 1) // { id: 1, name: 'foo' }
});Combines the values of the enumerator into a single value, using a dependent key to determine the property key.
@param {String} collectionKeyThe key name for the collection@param {String} dependentKeyPropThe key name for the property to reduce@param {*} startValueThe initial value
Ember.Object.extend({
items: [{ name: 'foo', age: 2 }, { name: 'bar', age: 5 }],
prop: 'age',
selectedItem: reduceKey('items', 'prop', 0) // 7
});Combines the values of the enumerator into a single value, using a property.
@param {String} collectionKeyThe key name for the collection@param {String} propNameThe key name for the property to reduce@param {*} startValueThe initial value
Ember.Object.extend({
items: [{ name: 'foo', age: 2 }, { name: 'bar', age: 5 }],
selectedItem: reduce('items', 'age', 0) // 7
});Returns an array with the items that do not match the passed value from a dependent key.
@param {String} collectionKeyThe key name for the collection@param {String} propNameThe key name for the property to reject by@param {String} valueKeyThe key name that returns the value to reject
Ember.Object.extend({
items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }],
selectedId: 2,
selectedItem: rejectKey('items', 'id', 'selectedId') // [{ id: 1, name: 'foo' }]
});Returns an array with the items that do not match the passed value.
@param {String} collectionKeyThe key name for the collection@param {String} propNameThe key name for the property to reject by@param {*} valueThe value to reject
Ember.Object.extend({
items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }],
selectedItem: reject('items', 'id', 2) // [{ id: 1, name: 'foo' }]
});Returns an array without an item by dependent key.
@param {String} collectionKeyThe key name for the collection@param {String} propNameThe key name for the property to exclude
Ember.Object.extend({
items: [1, 2, 3],
selectedItem: 1,
remainingItems: withoutKey('items', 'selectedItem') // [2, 3]
});Returns an array without an item by value.
@param {String} collectionKeyThe key name for the collection@param {String|Number} valueThe value to exclude
Ember.Object.extend({
items: [1, 2, 3],
remainingItems: without('items', 1) // [2, 3]
});Strict equality using dependent keys.
@param {String} firstKeyThe key name for the first property@param {String} secondKeyThe key name for the second property
Ember.Object.extend({
employeeId: 1
selectedId: 1,
isSelected: equalKey('employeeId', 'selectedId') // true
});Ternary conditional with dependent keys.
@param {String} conditionalKeyThe key name for the conditional property@param {String} trueKeyThe key name for the property to return when the conditional is true@param {String} falseKeyThe key name for the property to return when the conditional is false
Ember.Object.extend({
isSelected: true,
selectedText: 'Is Enabled',
deselectedText: 'Is Disabled',
displayText: ternaryKey('isSelected', 'selectedText', 'deselectedText') // 'Is Enabled'
});Ternary conditional.
@param {String} conditionalKeyThe key name for the conditional property@param {String} trueValueThe value to return when the conditional is true@param {String} falseValueThe value to return when the conditional is false
Ember.Object.extend({
isSelected: true,
displayText: ternary('isSelected', 'Is Enabled', 'Is Disabled') // 'Is Enabled'
});Greater than or equal to comparison between two dependent keys.
@param {String} lhsKeyThe key name for the left hand side of the operator@param {String} rhsKeyThe key name for the right hand side of the operator
Ember.Object.extend({
first: 5,
second: 2,
isFirstGreaterThanOrEqualToSecond: gteKey('first', 'second') // true
});Greater than comparison between two dependent keys.
@param {String} lhsKeyThe key name for the left hand side of the operator@param {String} rhsKeyThe key name for the right hand side of the operator
Ember.Object.extend({
first: 5,
second: 2,
isFirstGreaterThanSecond: gtKey('first', 'second') // true
});Lesser than or equal to comparison between two dependent keys.
@param {String} lhsKeyThe key name for the left hand side of the operator@param {String} rhsKeyThe key name for the right hand side of the operator
Ember.Object.extend({
first: 5,
second: 2,
isFirstLesserThanOrEqualToSecond: lteKey('first', 'second') // false
});Lesser than comparison between two dependent keys.
@param {String} lhsKeyThe key name for the left hand side of the operator@param {String} rhsKeyThe key name for the right hand side of the operator
Ember.Object.extend({
first: 5,
second: 2,
isFirstLessThanSecond: ltKey('first', 'second') // false
});Returns a POJO containing all the key-values that match the dependent keys.
@param {...rest} dependentKeysArgument list of dependent keys
Ember.Object.extend({
age: 5,
name: 'foo',
props: getPropertiesByKeys('age', 'name') // { age: 5, name: 'foo' }
});Returns a string of values joined together with a separator.
@param {String} seperatorSeparator to join values with@param {...rest} dependentKeysArgument list of dependent keys
Ember.Object.extend({
firstName: 'Derek',
lastName: 'Zoolander',
fullName: joinWith(' ', 'firstName', 'lastName') // 'Derek Zoolander'
});Returns a string of values joined together with a default separator (" ").
@param {...rest} dependentKeysArgument list of dependent keys
Ember.Object.extend({
firstName: 'Derek',
lastName: 'Zoolander',
fullName: join('firstName', 'lastName') // 'Derek Zoolander'
});git clonethis repositorynpm installbower install
ember server- Visit your app at http://localhost:4200.
ember testember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.