将车把变量传递给客户端 js 文件

Pass handlebars variable to client js file

本文关键字：客户端 js 文件 变量      更新时间：2023-09-26

我正在使用node.js + express + handlebars构建一个应用程序，并且正在寻找一种可以将Handlebars数据从服务器传递到客户端JavaScript文件的方法。例如：

//server.js 

var person = {
    name: George,
    age: 32, 
}
res.render('../views/person', person)

我希望能够在客户端使用 person 对象，例如：

//client.js 

console.log(person.age);
console.log(person.name);

有人可以帮忙吗？

谢谢！

试试这个

 res.render('../views/person', {person: person})

如果您要传递的不仅仅是几个对象，我建议您使用 Express 的路由围绕您的客户端-服务器关系构建某种 API（ http://expressjs.com/en/guide/routing.html ）

// server
app.get('/person/a', function (req, res, next) {
  console.log('the response will be sent by the next function ...');
  next();
}, function (req, res) {
  res.send({person: {age: 30, name: "Bob", greeting: "hello"}});
});

然后，您的客户端将使用http模块（https://nodejs.org/api/http.html）调用这些路由：

// client
http.get({
  hostname: 'localhost',
  port: 80,
  path: 'person/a',
}, (res) => {
// Do stuff with response
})
您可以使用

JSON 传递数据。Stringify（） with

{{{ }}}

有两个例子

  1. 在渲染函数上使用字符串化
    • 服务器
return res.render('../views/person', {person : JSON.Stringify(person)});
  • 客户
var person = {{{person}}}
console.log(person)
  1. 使哈佛商学院成为助手
    • 服务器
hbs.hbs.registerHelper('convert', function (date) {
        if (!date) {
            return;
        }
        return JSON.stringify(date);
    });
return res.render('../views/person', {person : person});
  • 客户
var person = {{{convert person}}}
console.log(person)

我建议2号。它可以在HTML和客户端javascript上使用。

您在服务器中的路由可能是这样的

app.get("/",(req,res)=>{
  res.render("view_name",{val: 123,val2: "123"});
 });

然后在您的视图文件中，您可以执行以下操作：

<script>
  console.log({{val}}); // if value it's number type
  console.log("{{val2}}");//in quotes if it's string type
  const val1 = {{val}};  
  const val2 = "{{val1}}";
<script/>
相关文章：