Переменная javascript не определена, когда встроена

Фон:

Я использую PlayFramework для создания системы веб- приложений (workflow), которая использует шаблонизатор Twirl (на основе scala) для создания моих представлений.

Проблема:

Мне нужно хранить переменные JavaScript внутри моего шаблона (который отображает HTML), где в отдельном файле (ах) JS я буду выполнять операции позже.

Какие-либо существующие решения?

Это можно сделать в соответствии с этими вопросами, которые я нашел:

  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 Dev

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 не имеет значения

Я делаю что-то неправильно?

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 без разделителей, чтобы она анализировалась как литерал объекта, также работает)

Другие вопросы по тегам