Change handlebars variable value using front end javascript

Question

My goal is to change the value of a handlebars variable using the front end JavaScript file.

BackEnd JavaScript (app.js)

res.render('index', { name: 'John' })

.hbs file

<button id="name" onclick="changeName()">{{name}}</button>

script.js (front end)

const changeName = () => {
// Change the value of {{name}} from 'John' to 'Bob'
}

I know you can do it with:

const changeName = () => {
document.getElementById('name').innerHTML = 'Bob'
}

But I specifically want to change the handlebars variable value because in my actual code it is a little more complex.

Thanks!

Girgetto · Accepted Answer · 2019-10-07 11:36:59Z

1

Take a look to Block helpers handlebars, in your case you can create a helper to change the name variable like this:

.hbs

<div class="entry">
<h1>{{title}}</h1>
 <div class="name">
  {{#nameHelper}}{{name}}{{/nameHelper}}
 </div>
</div>

script.js

Handlebars.registerHelper('nameHelper', function(options) {
return new Handlebars.SafeString(
  '<div class="name">'
  + options.fn(otherName)
  + '</div>');
});

answered Oct 7, 2019 at 11:36

Girgetto

1,0869 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change handlebars variable value using front end javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related