如何将 Express 响应对象传递给前端 JS 对象

我的控制器正在通过 res.render 将纬度/经度数据发送到我的车把视图。

res.render('coords', viewModel);

“viewModel”包含一个对象数组，每个对象都包含位置名称、纬度和经度。我想获取这些信息并在我的视图中的 Google 地图上绘制标记。当我尝试通过 Handlebars 将数据注入内联 JS 变量时......

<script>
var viewMarkers = {{viewModel}};
console.log(viewMarkers);
</script>

我在控制台中得到这个...

<script>
var viewMarkers = [object Object],[object Object];
console.log(viewMarkers);
</script>

我只是 Node/Express 领域的初学者，似乎无法理解如何将 viewModel 数据传递到前端的 Google 地图 JS。我的想法是我需要执行 AJAX 请求来访问数据。无论如何，我已经在互联网上搜索过，但还没有遇到这样的例子，并且可以使用一些社区指导。

我感谢任何知识/帮助。

你必须记住这一点车把 http://handlebarsjs.com/'工作就是返回Strings。小胡子标签，{{}}，将对象引用评估为字符串，以便将结果文本附加到 DOM 或 HTTP 响应正文。你里面的 JavaScript<script>标签在到达客户端之前不会被执行。 Handlebars 无法返回可以在服务器端渲染中幸存下来并最终分配给客户端上的变量的对象引用。

[object Object],[object Object]是两个对象的数组被字符串化时的结果（即，它是调用的输出console.log(String([{}, {}]));在浏览器的控制台中。

为了将 JavaScript 代码传递给客户端，您必须构造模板以返回具有有效 JavaScript 的字符串，其方式与典型模板返回有效 HTML 的方式大致相同。

这样做的漫长方法如下：

<script>
    var viewMarkers = [
        {{#each viewModel}}
            {
                location: '{{location}}',
                lat: {{lat}},
                lng: {{lng}}
            }
            {{#unless @last}},{{/unless}}
        {{/each}}
    ];
</script>

实现这一目标的更简单方法是JSON.stringify完成数组的字符串化工作：

res.render('coords', { viewModel: JSON.stringify(viewModel) });

然后，要渲染 JavaScript，您只需在模板中执行以下操作：

var viewMarkers = {{{viewModel2}}};

请注意，我们必须使用三重胡子，以免出现我们的报价HTML 转义 http://handlebarsjs.com/#html-escaping通过车把。

我创建了一个fiddle https://jsfiddle.net/76484/zd8mmbh1/供你参考。