Sane way to concat string and variable in Handlebars.js helper argument?

Question

I'm trying to build a simple modal component in Ember, but it seems the "logic-less" of Handlebars is too illogical for me. Is there any sane way to achieve a result somewhat like this?

<h2>Nice block about {{title}}</h2>
<a href="#" data-toggle="modal" id="add-item-{{title}}"> {{!this works}}

{{#my-modal modal-id="add-item-{{title}}" header='New {{title}}'}} {{! those don't}}
  <p>My body blabla</p>
{{/my-modal}}

Currently I end up getting my modal id as "add-item-{{title}}", literally, as well as the modal title.

And... no, for now I'm not considering passing the "title" as a new param and using it in the modal. The modal header in another template might not be "New {{title}}" but "are you sure?" or "details about {{title}}".

Ebro

That's how you should do it, or create a computed property in the scope that concatenates and builds up the string in the controller or component – Pulsatile

One last thing, {{}} within {{}} are not supported – Pulsatile

obviously they're not supported! that's exactly my issue :( how to interpolate variables in a handlebars argument? – Ebro

Regarding 'logic-less' I was wondering what 'on steroids' means in 'minimal templating on steroids' tagline but maybe it's something about losing your logic when you're on steroids... Having no elegant built in way of concatenating strings or 'if else' is inexplicable to me. – Ginseng

Answer 1

What you're looking for the is the concat helper. Using it, your second example would become:

{{#my-modal modal-id=(concat 'add-item-' title) header=(concat 'New ' title)}} 
  <p>My body blabla</p>
{{/my-modal}}

Sampan

Wow! this is super useful. Had no idea it existed. Thanks! – Harelda

Thanks this helped me get the background-url set properly.... gist.github.com/Artistan/8ee82f6753dca632ca3307917b4e6034 – Bolduc

Answer 2

I got here looking for a concat helper in handlebars.js. In case it's useful to someone landing here looking for the same, handlebars-helpers has an append helper built-in.

{{> my-modal modal-id=(append "add-item-" title) header=(append "New " title)}}

https://github.com/helpers/handlebars-helpers

Sunless

Answer 3

Yep, passing in the title is how I do it. If you need to add something to the title that's more than just model.title, then stuff a computed property on your controller (es6 string interpolation syntax):

controller

  modalHeader: function() {
    return `New ${this.get('model.title')}`;
  }.property('model.title')

template

{{#my-modal header=modalHeader}}
  <p>My body blabla</p>
{{/my-modal}}

As for the id, you can do some fun stuff in the component to override it, see this codepen, but I don't know how it messes with ember. Why do you want to set an id for a modal anyway?

Prewitt

about the id: I've renamed it in the example. the idea is to set the modal internal ID to something we can clearly reference outside of it, so I can open/close the modal through jQuery or Bootstrap own behaviours. – Ebro

the problem about the modal header is: different modals will have completely different titles. It won't work if I have to setup a computed property in the modal itself: the complete header must come from the outside. – Ebro

yep, that's why the modalHeader computed property is on the controller – Prewitt

you didn't get it. it does not make sense to set the modal title from INSIDE any part of the modal. It should be set by the including template, so it behaves as a component, not a piece of hardcoded stuff... – Ebro