Переменная javascript не определена, когда встроена
Фон:
Я использую PlayFramework для создания системы веб- приложений (workflow), которая использует шаблонизатор Twirl (на основе scala) для создания моих представлений.
Проблема:
Мне нужно хранить переменные JavaScript внутри моего шаблона (который отображает HTML), где в отдельном файле (ах) JS я буду выполнять операции позже.
Какие-либо существующие решения?
Это можно сделать в соответствии с этими вопросами, которые я нашел:
Этот создает карту, в которой данные хранятся и впоследствии извлекаются.
Этот пример создает простой пример хранения переменной в теге встроенного скрипта для последующего использования.
Наконец, этот пример использует более конкретный пример хранения данных в структурах данных в шаблоне и доступа к структурам данных в JS после анализа.
Пример, созданный активным участником SO, biesior, помогает многим разработчикам с Play! Рамочные вопросы
Подводя итог, что должно быть сделано:
- Передать некоторые данные в шаблон
@(myData: DataObject)
- Добавить данные, переданные в в тег сценария с именем JS
<html>
<body>
<script>
let someJSDataName = @myData
</script>
</body>
</html>
- Использовать в консоли 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 без разделителей, чтобы она анализировалась как литерал объекта, также работает)