CODEWITHSUNDEEP
ember.jshandlebars.jscustom-component
igorsantos07
igorsantos07

Reputation: 4692

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

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

Upvotes: 36

Views: 50905

Answers (3)

Mike Post
Mike Post

Reputation: 6460

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

Upvotes: 62

jiminy
jiminy

Reputation: 1618

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

Upvotes: 3

Kori John Roys
Kori John Roys

Reputation: 2661

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?

Upvotes: 0

Related Questions