How do I concatenate a string in handlebars view

Question

I wrote a helper function to help me format URL, which is the combination of some object attributes. How do I concatenate this attribute in handlebars view?

Helper function

const url = (link)=>{
    return process.env.URL+'/'+link.replace(/ /gi,'-').toLowerCase();
};

My view

<a href="{{url 'samples/'+this.name+'/'+this.class+'/'+this.id}}">{{this.name}}</a>

Answer 1

What you can do to accomplish this is to create a helper to concatenate your strings and pass the concatenated string to the url helper.

In JavaScript, every non-arrow function has a local variable named arguments assigned an object, in this object you'll find (you guessed it) the arguments passed to the function when it was invoked.

Using this arguments object we can create a helper for Handlebars.js that lets us concatenate as many strings as we want.

Because (as described by the documentation) the arguments object is an array-like object, we have to create an actual array from it that we can use to concatenate everything together using Array.join to make it as simple as possible.

Handlebars.registerHelper('concat', function() {
    return [...arguments].join('');
});

But why would it be that simple, right?

What I discovered when I was trying out this solution is that the last element in the arguments object is an object with some information about the helper that was used, like the name.

To make this work with that little bit of information in mind we have to slice the array so that the last element gets removed and then concatenate it.

Handlebars.registerHelper('concat', function() {
    arguments = [...arguments].slice(0, -1);
    return arguments.join('');
});

We now have a helper that we can use to concatenate whatever we want, the only thing left to do is pass it to the other helper, the url helper in this case.

{{url (concat 'samples/' this.name '/' this.class '/' this.id)}}

^ I found a comment on an GitHub issue regarding chaining helpers and that Handlebars.js apparently has native support for this.

I hope this helped and that I didn't spoon-feed to much without explaining it properly.