ember-functional-helpers
Advanced tools
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
pipePipes 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>
computeCalls an action as a template helper.
The square of 4 is {{compute (action "square") 4}}
toggleToggles a boolean value.
<button {{action (toggle this "isExpanded")}}>
{{if isExpanded "I am expanded" "I am not"}}
</button>
wSplits 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
map-byMaps an array on a property.
{{#each (map-by users "fullName") as |fullName|}}
{{fullName}}
{{/each}}
sort-bySort 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-byFilters 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}}
intersectCreates 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}}
unionJoins arrays to create an array of unique values.
{{#each (union cartA cartB cartC) as |cartItem|}}
{{cartItem.price}} x {{cartItem.quantity}} for {{cartItem.name}}
{{/each}}
takeReturns the first n entries of a given array.
<h3>Top 3:</h3>
{{#each (take contestants 3) as |contestant|}}
{{contestant.rank}}. {{contestant.name}}
{{/each}}
dropReturns an array with the first n entries omitted.
<h3>Other contestants:</h3>
{{#each (drop contestants 3) as |contestant|}}
{{contestant.rank}}. {{contestant.name}}
{{/each}}
repeatRepeats 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}}
rangeGenerates 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}}
joinJoins the given array with an optional separator into a string.
{{join categories ', '}}
group-byReturns 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}}
incIncrements by 1 or step.
{{inc numberOfPeople}}
{{inc numberOfPeople 2}}
Decrements by 1 or step.
{{dec numberOfPeople}}
{{dec numberOfPeople 2}}
Checks if the first argument is less than the second argument.
{{lt 4 5}}
Checks if the first argument is less than or equal to the second argument.
{{lte 4 5}}
Checks if the first argument is greater than the second argument.
{{gt 4 5}}
Checks if the first argument is greater than or equal to the second argument.
{{gte 4 5}}
git clone this repositorynpm installbower installember servernpm test (Runs ember try:testall to test your addon against multiple Ember versions)ember testember test --serverember buildFor more information on using ember-cli, visit http://www.ember-cli.com/.
DockYard, Inc © 2016
21 February 2016
FAQs
Functional helpers for Ember
The npm package ember-functional-helpers receives a total of 3 weekly downloads. As such, ember-functional-helpers popularity was classified as not popular.
We found that ember-functional-helpers demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.