35

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 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 by getting my modal id being "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}}".

igorsantos07
  • 4,456
  • 5
  • 43
  • 62
  • 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 '15 at 05:41
  • 2
    One last thing, {{}} within {{}} are not supported – Kingpin2k Apr 16 '15 at 05:50
  • 1
    obviously they're not supported! that's exactly my issue :( how to interpolate variables in a handlebars argument? – igorsantos07 Apr 16 '15 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 '22 at 11:28

3 Answers3

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}}
vvlnv
  • 394
  • 3
  • 9
Mike Post
  • 6,355
  • 3
  • 38
  • 48
  • 3
    Wow! this is super useful. Had no idea it existed. Thanks! – Sarus Feb 01 '16 at 20:38
  • Thanks this helped me get the background-url set properly.... https://gist.github.com/Artistan/8ee82f6753dca632ca3307917b4e6034 – Artistan May 04 '16 at 04:21
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

jiminy
  • 1,612
  • 3
  • 18
  • 21
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?

Kori John Roys
  • 2,621
  • 1
  • 19
  • 27
  • 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. – igorsantos07 Apr 16 '15 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. – igorsantos07 Apr 16 '15 at 13:11
  • yep, that's why the `modalHeader` computed property is on the controller – Kori John Roys Apr 16 '15 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... – igorsantos07 Apr 17 '15 at 02:49