In this article, we will look into what are Ember Composable Helpers and how are those useful but before that let's have a look at what are helpers in Ember.js

What is a Helper?

Helpers in Ember.js can be module or function that provides templates with the ability to have additional functionality.
They help in formatting the data as required by the template.

Example

Let's consider an example:

We have a list of arrays of movies as given below:

/**
  This is an array of objects of movies
**/

const movies=[
  {
    name:"Joker",
    isSuccessful:true
  },
  {
    name:"Titanic",
    isSuccessful:true
  },
  {
    name:"The GoldFinch",
    isSuccessful:false
  },
]

With the help of intermediate computed property, we can display a list of blockbuster movies as shown below:

/**
component.js
**/

import Ember from 'ember';

export default Ember.Component.extend({
  blockBusters: Ember.computed.filterBy('movies', 'isSuccessful', true)
});
/**
app/templates/component.js
**/

<h2>Blockbuster Movies</h2>
{{#each blockBusters as |movie|}}
  {{movie.name}}
{{/each}}

/**
Output 
**/
Blockbuster Movies
Joker
Titanic

In the above example, we have created an intermediate computed property as blockBusters and then looped that computed property with the help of each  helper inside the template.

This is the traditional way of displaying the data of model/components with filterBy property in Ember.

What is an Ember Composable Helper?

Ember composable helpers help in declarative templating. Declarative templating is giving templates the rights to improve presentation logic by composing actions to it.

Installation:

Run the following command in your terminal. 

ember install ember-composable-helpers

It will add a dependency ember-composable-helpers in the package.json file

Benefits of Using Ember Composable Helper:

With the help of composable helpers, the blockBusters computed macro creation can be removed and the logic of filterBy can be directly used  inside the templates.

Let's see how we can achieve the previously checked example with ember composable helper.

/**
app/template/component.hbs
**/

{{#each (filter-by "isSuccessful" movies) as |movie|}}
  {{movie.name}}
{{/each}}

In this way, with the help of ember-composable-helpers, ember apps can have the right to create web views without the help of computed macro's.

Check this GitHub  for other objects, action, array and math helpers present in ember-composable-helpers

Thank you for reading. ❤️

References