36

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

4
  • 1
    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
    – Kingpin2k
    Apr 16, 2015 at 5:41
  • 2
    One last thing, {{}} within {{}} are not supported
    – Kingpin2k
    Apr 16, 2015 at 5:50
  • 1
    obviously they're not supported! that's exactly my issue :( how to interpolate variables in a handlebars argument? Apr 16, 2015 at 13:07
  • 1
    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.
    – konrad
    Oct 25, 2022 at 11:28

3 Answers 3

62

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

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

0

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?

4
  • 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. Apr 16, 2015 at 13:10
  • 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. Apr 16, 2015 at 13:11
  • yep, that's why the modalHeader computed property is on the controller Apr 16, 2015 at 15:23
  • 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... Apr 17, 2015 at 2:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.