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

问题描述

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

My controller is sending lat/lng data to my Handlebars view via res.render.

res.render('coords', viewModel);

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

'viewModel' contains an array of objects, with each object containing a name of a location, lat, and lng. I want to take this information and plot markers on a Google map in my view. When I attempt to inject the data by way of Handlebars into an inline JS variable...

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

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

I get this in my console...

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

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

I'm only a beginner in the Node/Express realm and can't seem to comprehend how I can pass the viewModel data to the Google maps JS on the frontend. My thought is that I would need to do an AJAX request to access the data. Regardless, I've scoured the Internet, but have not come across an example of this yet and could use some community guidance.

感谢任何知识/帮助.

推荐答案

你必须记住 Handlebars 的工作是返回字符串.小胡子标签 {{}} 将对象引用评估为字符串，以便可以将结果文本附加到 DOM 或 HTTP 响应正文.<script> 标记中的 JavaScript 在到达客户端之前不会被执行.Handlebars 无法返回一个对象引用，该引用可以在服务器端渲染中存活并最终分配给客户端上的变量.

You must keep in mind that Handlebars' job is to return Strings. The mustache tags, {{}}, evaluate Object references as Strings so that the resultant text can be appended to the DOM or HTTP response body. The JavaScript inside your <script> tags does not get executed until it arrives on the client. There is no way for Handlebars to return an Object reference that could survive server-side rendering and eventually get assigned to a variable on the client.

[object Object],[object Object] 是两个 Object 的 Array 被字符串化后的结果(即，它是调用 console.log(String([{}, {}])); 在浏览器的控制台中.

[object Object],[object Object] is the result when an Array of two Objects is stringified (ie., it is the output of calling console.log(String([{}, {}])); in your browser's console.

为了向客户端提供 JavaScript 代码，您必须构造模板以返回带有有效 JavaScript 的字符串，这与典型模板返回有效 HTML 的方式非常相似.

In order to deliver JavaScript code to the client, you must construct your template to return a String with valid JavaScript in much the same way as a typical template returns valid HTML.

这样做的漫长过程如下:

The long way of doing this would be something like the following:

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

实现这一点的更简单方法是让 JSON.stringify 完成对数组进行字符串化的工作:

The simpler way of achieving this would be to have JSON.stringify do the work of stringifying your Array:

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

然后，要呈现 JavaScript，您只需在模板中执行以下操作:

Then to render the JavaScript you would need only do the following in your template:

var viewMarkers = {{{viewModel2}}};

请注意，我们必须使用三重胡须，以免 Handlerbars 引用 HTML-escaped.

Note that we must use triple mustaches in order not to have our quotes HTML-escaped by Handlerbars.

我创建了一个 fiddle 供您参考.

I have created a fiddle for your reference.

这篇关于如何将 Express 响应对象传递给前端 JS 对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！