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

【问题标题】：Pass handlebars variable to client js file将车把变量传递给客户端 js 文件
【发布时间】：2016-05-02 00:47:57
【问题描述】：

我正在使用 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);

有人可以帮忙吗？

谢谢！

【问题讨论】：

标签： javascript node.js handlebars.js

【解决方案1】：

您可以使用带有 {{{ }}} 的 JSON.Stringify() 传递数据

有两个例子

在渲染函数上使用 Stringify
- 服务器

return res.render('../views/person', {person : JSON.Stringify(person)});

客户

var person = {{{person}}}
console.log(person)

使 HBS 助手
- 服务器

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 上使用。

【讨论】：

我已经尝试了 2 号解决方案，但是当我的页面加载时，我得到了 Uncaught SyntaxError: Unexpected token '{'。此客户端 javascript 不理解三方括号。你是如何完成这项工作的？
三方括号只能在.hbs文件中使用。
Matthew Wolman // 你应该声明包含三重括号的 javascript 变量。并将该变量传递给javascript文件

【解决方案2】：

试试这个

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

【讨论】：

如果你想在外部js文件中使用它，你需要在从你的js文件访问它之前定义变量“person”，或者用ajax将它检索到你的js文件中（比如Kevin写等）。或者如果您想在车把文件中使用它，请将 console.log 写入脚本标签
oh handlebars 会转义输出，但您可以像这样修复它：stackoverflow.com/a/10233247/3774580

【解决方案3】：

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

// 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
})

【讨论】：

谢谢 - http.get({})... 会在 client.js 文件中吗？
是的。客户端正在向服务器上的特定位置发出“GET”http 请求，该位置由 Express 提供服务。无论您提供什么服务，它都会在 server.js 文件中进行处理，如果您转到该路由“localhost:8080/person/a”，甚至可以在浏览器中进行测试。同样，如果您想向服务器发送数据，请让您的客户端发送一个“POST”http 请求，并确保您的服务器接受对特定路由的 POST 请求，例如“localhost:8080/send/person/”。只需查看我提供的 2 个链接即可了解如何执行此操作。

【解决方案4】：

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

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/>

【讨论】：