内联时未定义javascript变量答案

【问题标题】：javascript variable not defined when inline内联时未定义javascript变量
【发布时间】：2019-01-13 22:30:02
【问题描述】：

背景：

我正在使用 PlayFramework 创建一个 webapp（工作流）系统，该系统使用 Twirl template engine（基于 scala）来创建我的视图。

问题：

我需要将 JavaScript 变量存储在我的模板（呈现 HTML）中，在一个单独的 JS 文件中，我将在稍后执行操作。

任何现有的解决方案？

这可以根据我发现的这些SO问题来完成：

This one 创建一个地图，其中存储数据并在以后检索。
This one 创建了一个将变量存储在内联脚本标记中以供以后使用的简单示例
最后this one用了一个更具体的例子，将数据存储在模板中的数据结构中，解析后访问JS中的数据结构。

由活跃的 SO 贡献者 Biesior 创建的示例，帮助许多开发人员使用 Play！框架问题

总结一下应该做什么：

将一些数据传入模板

@(myData: DataObject)

将传入的数据添加到带有 JS 名称的脚本标签中

<html>
  <body>
    <script>
      let someJSDataName = @myData
    </script>
  </body>
</html>

在 JS / Google Chrome 开发控制台中使用

someJSDataName.toString

这应该显示一些结果！

但问题是什么？

让我告诉你。

渲染的 HTML：

//...
<div class="BoxMediumBlue" style="padding: 20px;">

        <script>
                let facultyDepartments = {Science=[Computer Science, Physics], Biology=[Zooology]};
        </script>

        <br>
        <div class="container-heading">
//...

尝试在我的 Google Chrome 开发控制台中访问此数据时：

facultyDepartments
VM1209:1 Uncaught ReferenceError: facultyDepartments is not defined
    at <anonymous>:1:1

仅供参考，使用var 没有区别

我做错了吗？

【问题讨论】：

您渲染的 HTML 的 JS 语法无效。 = {Science=[Computer Science, Physics],...
这应该代表一个 JS 地图。怎么无效（看不到问题）
JS 地图会在某处涉及new Map(...。如果你想拥有一个对象，那么对象需要键值对，其中键和值之间用:s 分隔，每对之间用, 分隔。字符串值也需要分隔符。
嗯。我相信 JSON 解析器可以帮助我解决这个问题。谢谢，您介意将其发布为答案吗？

标签： javascript jquery html playframework twirl

【解决方案1】：

你对facultyDepartments的定义使用了JS引擎不理解的语法：

let facultyDepartments = {Science=[Computer Science, Physics], Biology=[Zooology]};

对象应该包含键值对，其中键和值由:s 分隔，并且键和值（如果是字符串）具有" 或' 等分隔符。您应该尝试让模板来呈现 JSON，例如：

let facultyDepartments = {"Science":["Computer Science", "Physics"], "Biology":["Zooology"]};
console.log(facultyDepartments.Science);

（从技术上讲，JSON 是一种格式化 字符串 的方法，但是插入一个不带分隔符的 JSON 字符串，以便将其解析为对象文字也可以）

【讨论】：