ember-functional-helpers v0.7.0

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

• Action
  • pipe
  • compute
  • toggle
• String
  • w
• Array
  • map-by
  • sort-by
  • filter-by
  • intersect
  • union
  • take
  • drop
  • repeat
  • range
  • join
• Object
  • group-by
• Math
  • inc
  • dec
  • lt
  • lte
  • gt
  • gte

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>

⬆️️ back to top

compute

Calls an action as a template helper.

The square of 4 is {{compute (action "square") 4}}

⬆️ back to top

toggle

Toggles a boolean value.

<button {{action (toggle this "isExpanded")}}>
  {{if isExpanded "I am expanded" "I am not"}}
</button>

⬆️ back to top

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

⬆️ back to top

Array helpers

map-by

Maps an array on a property.

{{#each (map-by users "fullName") as |fullName|}}
  {{fullName}}
{{/each}}

⬆️ back to top

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}}

⬆️ back to top

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}}

⬆️ back to top

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}}

⬆️ back to top

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}}

⬆️ back to top

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}}

⬆️ back to top

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}}

⬆️ back to top

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}}

⬆️ back to top

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}}

⬆️ back to top

join

Joins the given array with an optional separator into a string.

{{join categories ', '}}

⬆️ back to top

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}}

⬆️ back to top

Math helpers

inc

Increments by 1 or step.

{{inc numberOfPeople}}
{{inc numberOfPeople 2}}

⬆️ back to top

dec

Decrements by 1 or step.

{{dec numberOfPeople}}
{{dec numberOfPeople 2}}

⬆️ back to top

lt

Checks if the first argument is less than the second argument.

{{lt 4 5}}

⬆️ back to top

lte

Checks if the first argument is less than or equal to the second argument.

{{lte 4 5}}

⬆️ back to top

gt

Checks if the first argument is greater than the second argument.

{{gt 4 5}}

⬆️ back to top

gte

Checks if the first argument is greater than or equal to the second argument.

{{gte 4 5}}

⬆️ back to top

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember 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

@dockyard

Licensed under the MIT license