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}}
".
To have access to the passed arguments, you need to look for them into the 'hash' object: {{hash. foo}}. (I'm new with handlebars and this took me a while to figure out) - Thanks, great helper! Note, this requires you to have your partials pre-compiled before using the helper.
In JavaScript, we can assign strings to a variable and use concatenation to combine the variable to another string. To concatenate a string, you add a plus sign+ between the strings or string variables you want to connect. let myPet = 'seahorse'; console.
Because it was originally designed to generate HTML, Handlebars escapes values returned by a {{expression}} . If you don't want Handlebars to escape a value, use the "triple-stash", {{{ . Source: https://handlebarsjs.com/guide/#html-escaping.
A Handlebars helper call is a simple identifier, followed by zero or more parameters (separated by a space). Each parameter is a Handlebars expression that is evaluated exactly the same way as described above in "Basic Usage": template {{firstname}} {{loud lastname}}
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}}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With