Question

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

res.render('coords', viewModel);

'viewModel'包含一个对象数组，每个对象包含一个location，lat和lng的名称。我想在我的视图中将这些信息和标记绘制在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 maps JS。我的想法是我需要做一个AJAX请求来访问数据。无论如何，我已经浏览了互联网，但还没有找到这方面的例子，可以使用一些社区指导。

我感谢任何知识/帮助。

Answer 1

您必须记住Handlebars'工作是返回字符串。小胡子标记{{}}将对象引用计算为字符串，以便生成的文本可以附加到DOM或HTTP响应主体。 <script>标记内的JavaScript在到达客户端之前不会执行。 Handlebars无法返回可在服务器端呈现后继续存在的Object引用，并最终被分配给客户端上的变量。

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

为了向客户端提供JavaScript代码，您必须构建模板以返回带有有效JavaScript的String，其方式与典型模板返回有效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-escaped。

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

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

1 个答案: