Monster on Fire

Concat helper in Ember 1.12.0

21 May 2016

I'm relatively new to Ember, so I'm still poking around and trying to figure things out, ya know?

Last week, I worked on an issue related to shopping cart totals.

Screenshot to illustrate:

  • The price with the line-through, in the image below, is the value total of the cart before any discounts are added.
  • The price that is bold is the cart total after discounts
  • In this image, there are no discounts, therefore both values are the same

Only show the value total if there are actually savings/discounts. i.e. if value total !== cart total


Ember actually has a concat helper that was introduced in Ember 1.13.0, but this information was not useful to me because we are on Ember 1.12.0.


After Googling and asking the friendly people in the Ember Slack Community, I ended up making a little concat helper based on the actual Ember concat helper

// app/helpers/compare-args.js

import Ember from 'ember';

 * Usage in template:
 * {{#if (compare-args param1 param2}}
const compareArgs = (params) => params[0] !== params[1];

export default Ember.HTMLBars.makeBoundHelper(compareArgs);

Note: The helper must have at least one dash in the filename to prevent clashes with current or future HTML element names.

While this is a sub-optimal workaround that will have to re-factored when the time comes to upgrade our Ember version, I'm going to just leave this here.

And lastly, I have to find out where I read about opting for a component over a helper due to Ember moving away from view helpers.

That is all.

© 2020 -