使用前端javascript更改车把变量值

我的目标是使用前端JavaScript文件来更改车把变量的值。

后端JavaScript（app.js）

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

。hbs文件

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

script.js（前端）

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

我知道您可以使用：

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

但是我特别想更改handlebars变量的值，因为在我的实际代码中，它有点复杂。

谢谢！

看看Block helpers handlebars，您可以创建一个帮助程序来更改名称变量，如下所示：

。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>');
});

使用前端javascript更改车把变量值

我的目标是使用前端JavaScript文件来更改车把变量的值。

后端JavaScript（app.js）

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

。hbs文件

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

script.js（前端）

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

我知道您可以使用：

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

但是我特别想更改handlebars变量的值，因为在我的实际代码中，它有点复杂。

谢谢！

看看Block helpers handlebars，您可以创建一个帮助程序来更改名称变量，如下所示：

。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>');
});