ember-functional-helpers
Functional helpers for Ember that enables more declarative templating. These helpers can be composed together to form powerful ideas:
{{#each (map-by users "fullName") as |fullName|}} <input type="text" value={{fullName}} onchange={{action (mut newName)}}> <button {{action (pipe updateFullName saveUser) newName}}> Update and save {{fullName}} to {{newName}} </button>{{/each}}
To install:
ember install ember-functional-helpers
Available helpers
Usage
Action helpers
pipe
Pipes the return values of actions in a sequence of actions. This is useful to compose a pipeline of actions, so each action can do only one thing.
<button {{action (pipe addToCart purchase redirectToThankYouPage) item}}> 1-Click Buy</button>
compute
Calls an action as a template helper.
The square of 4 is {{compute (action "square") 4}}
toggle
Toggles a boolean value.
<button {{action (toggle this "isExpanded")}}> {{if isExpanded "I am expanded" "I am not"}}</button>
String helpers
w
Splits a string on whitespace and/or turns multiple words into an array
{{#each (words "First" "Second" "Last") as |rank|}} Our {{rank}} place winner is ...{{/each}}
or:
{{#each (words "First Second Last") as |rank|}} Our {{rank}} place winner is ...{{/each}}
See also: Ember w
documentation
Array helpers
map-by
Maps an array on a property.
{{#each (map-by users "fullName") as |fullName|}} {{fullName}}{{/each}}
sort-by
Sort an array by given properties.
{{#each (sort-by users "lastName" "firstName") as |user|}} {{user.lastName}}, {{user.firstName}}{{/each}}
You can append :desc
to properties to sort in reverse order.
{{#each (sort-by users "age:desc") as |user|}} {{user.firstName}} {{user.lastName}} ({{user.age}}){{/each}}
filter-by
Filters an array by a property.
{{#each (filter-by users "isActive" true) as |user|}} {{user.name}} is active!{{/each}}
If you omit the third argument it will test if the property is truthy.
{{#each (filter-by users "address") as |user|}} {{user.name}} has an address specified!{{/each}}
You can also pass an action as third argument:
{{#each (filter-by users age (action "olderThan" 18)) as |user|}} {{user.name}} is older than eighteen!{{/each}}
intersect
Creates an array of unique values that are included in all given arrays.
<h1>Matching skills</h1>{{#each (intersect desiredSkills currentSkills) as |skill|}} {{skill.name}}{{/each}}
union
Joins arrays to create an array of unique values.
{{#each (union cartA cartB cartC) as |cartItem|}} {{cartItem.price}} x {{cartItem.quantity}} for {{cartItem.name}}{{/each}}
take
Returns the first n
entries of a given array.
<h3>Top 3:</h3>{{#each (take contestants 3) as |contestant|}} {{contestant.rank}}. {{contestant.name}}{{/each}}
drop
Returns an array with the first n
entries omitted.
<h3>Other contestants:</h3>{{#each (drop contestants 3) as |contestant|}} {{contestant.rank}}. {{contestant.name}}{{/each}}
repeat
Repeats n
times. This can be useful for making an n-length arbitrary list for iterating upon (you can think of this form as a times helper, a la Ruby's 5.times { ... }
):
{{#each (repeat 3) as |empty|}} I will be rendered 3 times{{/each}}
You can also give it a value to repeat:
{{#each (repeat 3 "Adam") as |name|}} {{name}}{{/each}}
range
Generates a range of numbers between a min
and max
value.
{{#each (range 10 20) as |number|}} {{! `number` will go from 10 to 19}}{{/each}}
It can also be set to inclusive
:
{{#each (range 10 20 true) as |number|}} {{! `number` will go from 10 to 20}}{{/each}}
And works with a negative range:
{{#each (range 20 10) as |number|}} {{! `number` will go from 20 to 11}}{{/each}}
join
Joins the given array with an optional separator into a string.
{{join categories ', '}}
Object helpers
group-by
Returns an object where the keys are the unique values of the given property, and the values are an array with all items of the array that have the same value of that property.
{{#each-in (group-by artists "category") as |category artists|}} <h3>{{category}}</h3> <ul> {{#each artists as |artist|}} <li>{{artist.name}}</li> {{/each}} </ul>{{/each-in}}
Math helpers
inc
Increments by 1
or step
.
{{inc numberOfPeople}}{{inc numberOfPeople 2}}
dec
Decrements by 1
or step
.
{{dec numberOfPeople}}{{dec numberOfPeople 2}}
lt
Checks if the first argument is less than the second argument.
{{lt 4 5}}
lte
Checks if the first argument is less than or equal to the second argument.
{{lte 4 5}}
gt
Checks if the first argument is greater than the second argument.
{{gt 4 5}}
gte
Checks if the first argument is greater than or equal to the second argument.
{{gte 4 5}}
Installation
git clone
this repositorynpm install
bower install
Running
ember server
- Visit your app at http://localhost:4200.
Running Tests
npm test
(Runsember try:testall
to test your addon against multiple Ember versions)ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.
Legal
DockYard, Inc © 2016