javascript 内联时未定义变量

Question

背景：

我正在使用 PlayFramework to create a webapp (workflow) system which uses the Twirl template engine（基于 scala）来创建我的视图。

问题：

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

有现成的解决方案吗？

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

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

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

总结应该做什么：

将一些数据传入模板

@(myData: DataObject)

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

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

在 JS 中使用/GoogleChrome开发控制台

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 没有区别

我是不是做错了什么？

Answer 1

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

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

对象应包含键值对，其中键和值由 : 分隔，并且键和值在字符串时具有分隔符，如 " 或 '.您应该尝试让模板渲染 JSON，例如：

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

(JSON 在技术上是一种格式化 strings 的方法，但是插入不带定界符的 JSON 字符串以便将其解析为对象文字也可以)

javascript 内联时未定义变量

javascript variable not defined when inline

javascript

jquery

html

playframework

twirl