如何将一个对象从Pug传递到前端JavaScript

Question

我正在使用Pug，并且我想将一个变量传递给前端进行信息展示，但是当我尝试这样做时，它会以文本的形式传递。

以下是我的做法。

控制器代码：

res.render('view/edit', {
     title: 'Title',
     sub:true,
     data: variableObject
 });

这是在渲染视图中的代码：

script(type='text/javascript').
    var x = "#{data}"
    console.log(x);

这是日志的结果

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

我无法访问该文本对象，有没有一种方法可以像对象一样传递该对象？

- Jorge Mejia

Answer 1

首先使用JSON.stringify将您的对象转换为字符串：

res.render('view/edit', {
     title: 'Title',
     sub: true,
     data: JSON.stringify(variableObject)
 });

然后使用未转义字符串插值!{data}

script(type='text/javascript').
    var x = !{data}
    console.log(x);

---

或者，在您的模板中一次完成所有操作：

script(type='text/javascript').
    var x = !{JSON.stringify(data)}
    console.log(x);

(感谢@Matt的赞扬，谢谢)

- dNitro

---

如果字符串包含“</script>”，会创建问题，因为浏览器会认为它是开放的<script>标签的关闭标签。有没有简单的解决方案？ - hytromo

有没有一种方法以相反的方式做到这一点？Pug允许使用在页面呈现后创建的动态数组进行声明吗？ - Josh Sharkey

Answer 2

在这种情况下，我使用了这个：

var x = "#{ JSON.stringify(y) }"
   console.log( JSON.parse(x.replace(/"/g,'"')) );

我不确定这是否是最佳实践。

- Jorge Mejia

---

就像dNitro的回答中所说，使用!{JSON.stringify(y)}可以解决转义问题。 - Matt