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

Question

我的控制器正在通过 res.render 将 lat/lng 数据发送到我的 Handlebars 视图。

res.render('coords', viewModel);

'viewModel' 包含一个对象数组，每个对象包含一个位置名称、lat 和 lng。我想在我的视图中获取这些信息并在谷歌地图上绘制标记。当我尝试通过 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 请求来访问数据。无论如何，我已经在互联网上搜索过，但还没有遇到过这样的例子，可以使用一些社区指导。

我感谢任何知识/帮助。

Answer 1

您必须牢记Handlebars的工作是返回Strings。mustache 标签将{{}}对象引用作为字符串进行评估，以便将结果文本附加到 DOM 或 HTTP 响应正文。<script>标签中的 JavaScript 在到达客户端之前不会执行。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}}};

请注意，我们必须使用三重胡子，以免Handlerbars对我们的引号进行HTML 转义。

我已经创建了一个小提琴供您参考。