ember-macaroni
Keep your app code DRY and copypasta free with computed property macaronis (macros) for Ember.js 1.13.x and greater.
Why
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.
Usage
First, import the macro(s) you need, or the whole thing:
import { findFromCollectionByKey } from 'ember-macaroni'; // imports a named macro
import macros from 'ember-macaroni'; // imports all the things
const { findFromCollectionByValue } = macros; // destructuring
export default Ember.Component.extend({
items: null,
selectedId: null,
selectedItem: findFromCollectionByKey('items', 'id', 'selectedId'),
hansel: findFromCollectionByValue('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);
}
}
});
Available macros
Collection
findFromCollectionByKey
Returns the first item with a property matching the passed value from a dependent key.
@param {String} collectionKey
The key name for the collection@param {String} propName
The key name for the property to find by@param {String} valueKey
The key name that returns the value to find
Ember.Object.extend({
items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }],
selectedId: 1,
selectedItem: findFromCollectionByKey('items', 'id', 'selectedId') // { id: 1, name: 'foo' }
});
findFromCollectionByValue
Returns the first item with a property matching the passed value.
@param {String} collectionKey
The key name for the collection@param {String} propName
The key name for the property to find by@param {*} value
The value to match`
Ember.Object.extend({
items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }],
selectedItem: findFromCollectionByValue('items', 'id', 1) // { id: 1, name: 'foo' }
});
rejectFromCollectionByKey
Returns an array with the items that do not match the passed value from a dependent key.
@param {String} collectionKey
The key name for the collection@param {String} propName
The key name for the property to reject by@param {String} valueKey
The key name that returns the value to reject
Ember.Object.extend({
items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }],
selectedId: 2,
selectedItem: rejectFromCollectionByKey('items', 'id', 'selectedId') // [{ id: 1, name: 'foo' }]
});
rejectFromCollectionByValue
Returns an array with the items that do not match the passed value.
@param {String} collectionKey
The key name for the collection@param {String} propName
The key name for the property to reject by@param {*} value
The value to reject
Ember.Object.extend({
items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }],
selectedItem: rejectFromCollectionByValue('items', 'id', 2) // [{ id: 1, name: 'foo' }]
});
filterFromCollectionByKey
Returns an array with just the items with the matched property.
@param {String} collectionKey
The key name for the collection@param {String} propName
The key name for the property to filter by@param {String} valueKey
The key name that returns the value to filter
Ember.Object.extend({
items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }],
selectedId: 1,
selectedItem: filterFromCollectionByKey('items', 'id', 'selectedId') // [{ id: 1, name: 'foo' }]
});
filterFromCollectionByContains
Returns an array with just the items that are contained in another array.
@param {String} collectionKey
The key name for the collection@param {String} propName
The key name for the property to filter by@param {Array} values
The array of values to filter
Ember.Object.extend({
items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }],
selectedId: 1,
selectedItem: filterFromCollectionByContains('items', 'id', [1]) // [{ id: 1, name: 'foo' }]
});
collectionWithoutKey
Returns an array without an item by dependent key.
@param {String} collectionKey
The key name for the collection@param {String} propName
The key name for the property to exclude
Ember.Object.extend({
items: [1, 2, 3],
selectedItem: 1,
remainingItems: collectionWithoutKey('items', 'selectedItem') // [2, 3]
});
reduceCollectionByKey
Combines the values of the enumerator into a single value, using a dependent key.
@param {String} collectionKey
The key name for the collection@param {String} dependentKey
The key name for the property to reduce@param {*} startValue
The initial value
Ember.Object.extend({
items: [{ name: 'foo', age: 2 }, { name: 'bar', age: 5 }],
selectedItem: reduceCollectionByKey('items', 'age', 0) // 7
});
Truth
isEqualByKeys
Strict equality using dependent keys.
@param {String} firstKey
The key name for the first property@param {String} secondKey
The key name for the second property
Ember.Object.extend({
employeeId: 1
selectedId: 1,
isSelected: isEqualByKeys('employeeId', 'selectedId') // true
});
ifThenElseWithKeys
Ternary conditional with dependent keys.
@param {String} conditionalKey
The key name for the conditional property@param {String} trueKey
The key name for the property to return when the conditional is true@param {String} falseKey
The key name for the property to return when the conditional is false
Ember.Object.extend({
isSelected: true,
selectedText: 'Is Enabled',
deselectedText: 'Is Disabled',
displayText: ifThenElseWithKeys('isSelected', 'selectedText', 'deselectedText') // 'Is Enabled'
});
ifThenElseWithValues
Ternary conditional.
@param {String} conditionalKey
The key name for the conditional property@param {String} trueValue
The value to return when the conditional is true@param {String} falseValue
The value to return when the conditional is false
Ember.Object.extend({
isSelected: true,
displayText: ifThenElseWithValues('isSelected', 'Is Enabled', 'Is Disabled') // 'Is Enabled'
});
gte
Greater than or equal to comparison between two dependent keys.
@param {String} lhsKey
The key name for the left hand side of the operator@param {String} rhsKey
The key name for the right hand side of the operator
Ember.Object.extend({
first: 5,
second: 2,
isFirstGreaterThanOrEqualToSecond: gte('first', 'second') // true
});
gt
Greater than comparison between two dependent keys.
@param {String} lhsKey
The key name for the left hand side of the operator@param {String} rhsKey
The key name for the right hand side of the operator
Ember.Object.extend({
first: 5,
second: 2,
isFirstGreaterThanSecond: gt('first', 'second') // true
});
lte
Lesser than or equal to comparison between two dependent keys.
@param {String} lhsKey
The key name for the left hand side of the operator@param {String} rhsKey
The key name for the right hand side of the operator
Ember.Object.extend({
first: 5,
second: 2,
isFirstLesserThanOrEqualToSecond: lte('first', 'second') // false
});
lt
Lesser than comparison between two dependent keys.
@param {String} lhsKey
The key name for the left hand side of the operator@param {String} rhsKey
The key name for the right hand side of the operator
Ember.Object.extend({
first: 5,
second: 2,
isFirstLessThanSecond: lt('first', 'second') // false
});
General
getPropertiesByKeys
Returns a POJO containing all the key-values that match the dependent keys.
@param {...rest} dependentKeys
Argument list of dependent keys
Ember.Object.extend({
age: 5,
name: 'foo',
props: getPropertiesByKeys('age', 'name') // { age: 5, name: 'foo' }
});
joinWith
Returns a string of values joined together with a separator.
@param {String} seperator
Separator to join values with@param {...rest} dependentKeys
Argument list of dependent keys
Ember.Object.extend({
firstName: 'Derek',
lastName: 'Zoolander',
fullName: joinWith(' ', 'firstName', 'lastName') // 'Derek Zoolander'
});
Installation
git clone
this repositorynpm install
bower install
Running
ember server
- Visit your app at http://localhost:4200.
Running Tests
ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.