时间戳

首页 > 解决方案 > 内联时未定义javascript变量

javascript - 内联时未定义javascript变量

问题描述

背景：

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

问题：

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

任何现有的解决方案？

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

  1. 这个创建了一个地图，其中存储了数据并稍后检索。

  2. 这个创建了一个将变量存储在内联脚本标记中以供以后使用的简单示例

  3. 最后，这个使用一个更具体的例子，将数据存储在模板中的数据结构中，并在解析后访问 JS 中的数据结构。

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

总结一下应该做的事情：

  1. 将一些数据传入模板

@(myData: DataObject)

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

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

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

难道我做错了什么？

标签： javascriptjqueryhtmlplayframeworktwirl

解决方案

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

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

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

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

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

推荐阅读