Доступ к переменной EJS в логике JavaScript

Question

Я работаю над приложением на Node.js (это игра). В данный момент у меня есть код, который перенаправляет пользователя на нужную комнату, когда он выбирает её на главной странице.

В данный момент это реализовано следующим образом с использованием Express v2.5.8:

server.get("/room/:name/:roomId", function (req, res) {
  game = ~databaseLookup~
  res.render("board", { gameState: game.gameState });
});

На странице board.ejs я могу получить доступ к переменной gameState с помощью следующего кода:

<% if (gameState) { %>
  <h2>I have a game state!</h2>
<% } %>

Мой вопрос: есть ли способ импортировать эту переменную в мою JavaScript-логику? Я хочу сделать что-то вроде var gs = ~import ejs gameState~, чтобы иметь возможность использовать её переменные и выводить значение на консоль для проверки. В конечном итоге я хочу отобразить игровое поле корректно, и для этого мне нужно получить доступ к позициям фигур и отобразить их на экране.

Спасибо!

Answer 1

На основе того, что было отвечено, вы можете сделать это следующим образом:

res.render("board", { gameState: game.gameState });

Затем вы можете сериализовать и затем десериализовать объект, как показано ниже:

const gameState = JSON.parse('<%- JSON.stringify(gameState) %>');

Это сделает все необходимое лучше! 😄

Answer 2

Я столкнулся с такой же проблемой. Мне нужно было использовать данные не только для рендеринга страницы, но и в моем JavaScript-скрипте. Поскольку страница представляет собой просто строку после рендеринга, необходимо превратить данные в строку, а затем снова разобрать их в JavaScript. В моем случае данные были в формате JSON-массива, и я использовал следующий код:

<script>
  var test = '<%- JSON.stringify(sampleJsonData) %>'; // test теперь является валидным объектом JS
</script>

Одинарные кавычки используются, чтобы не путаться с двойными кавычками, которые используются в stringify. Также, согласно документации EJS:

"<%- Выводит неэкранированное значение в шаблон"

Аналогично можно сделать и с массивами: просто конкатенируйте массив, а затем разбейте его снова.

Answer 3

В EJS-шаблоне (например, testing.ejs) вы можете передавать данные из вашего маршрутизатора следующим образом:

<html>
<!-- контент -->
<script>
    // Преобразование данных, переданных из маршрутизатора в ejs (только в шаблоне EJS)
    var parsed_data = <%- JSON.stringify(data) %>  
</script>
</html>

На стороне сервера (например, в Router.js) вы можете рендерить шаблон так:

res.render('/testing', {
    data: data // любые данные, которые нужно передать в ejs-шаблон
});

В подключенном js (или jQuery) файле, например, script.js, вы можете использовать эти данные так:

В JavaScript:

console.log(parsed_data);

В jQuery:

$(document).ready(function(){
    console.log(parsed_data);
});

Обратите внимание на следующие моменты:

Используйте <%- %> вместо обычного <%= %>, чтобы избежать экранирования символов и правильно сериализовать данные в JavaScript.
Вы не можете объявлять или использовать данные, переданные из маршрутизатора, напрямую в подключенных JavaScript или jQuery файлах. Данные должны быть объявлены в EJS-шаблоне.
Определяйте <%- %> только в EJS-шаблоне, а затем используйте их в любом подключенном скриптовом файле.

Несмотря на некоторые ограничения, это считается хорошей практикой для передачи данных из маршрутизатора в шаблон и последующего использования в скриптах.

Answer 4

В вашем вопросе вы предлагаете альтернативную логику, которая сработала для вас, и это действительно интересный подход. Если переменная, переданная на страницу EJS, называется uid, вы можете поместить ее содержимое в тег div или h и затем получить это содержимое в скрипте, присвоив его переменной.

Вот пример кода на EJS:

<script type="text/javascript">
    $(document).ready(function() {
        var x = $("#uid").html(); 
        alert(x);  // Теперь переменная 'x' в JS содержит uid, который был передан из Node.js.
    });
</script>

<h2 style="display:none;" id="uid"><%= uid %></h2>

В этом примере мы скрываем элемент h2, но его содержимое все равно доступно через jQuery. Это позволяет легко получить значение, переданное из бэкенда, и использовать его в JavaScript. Это решение действительно удобно, если вам нужно использовать переданное значение на клиентской стороне.

Answer 5

Это работает для меня.

// данные для столбчатой диаграммы
var label = '<%- JSON.stringify(bowlers) %>';
var dataset = '<%- JSON.stringify(data) %>';

var barData = {
  labels: JSON.parse(label),
  datasets: JSON.parse(dataset)
}

В этом коде я использую JSON.stringify для преобразования объекта bowlers и данных data в строку, а затем с помощью JSON.parse конвертирую их обратно в объекты для использования в диаграмме. Убедитесь, что передаваемые данные корректны и соответствуют ожидаемому формату.

Доступ к переменной EJS в логике JavaScript

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных