Используйте контекст Handlebars.js из тега <script> - PullRequest
Новая
       27

Используйте контекст Handlebars.js из тега <script>

0 голосов
/ 06 июля 2019

Я пытаюсь использовать контекстные переменные, заданные для Express бэкэнда, используя Handlebars.js (express-handlebars на npm) в качестве контроллера представления из тега <script>.Я прочитал этот пост , но ответ показался мне взломанным.Вот проблема в коде:

app.js (сервер) 

app.get('/', (req, res) => {
  res.render('index', {
    data: [1, 2, 3]
  }
}

index.handlebars

<script>
  const data = {{data}}
</script>

<script src="js/index.js"></script>

index.js (клиент) 

console.log(data)

Я делаю это так, чтобы я мог получить доступ к переменной data из index.js, так что лучший способ сделать это решитэта проблема.

1 Ответ

1 голос
/ 07 июля 2019

К сожалению, это единственный способ , если вам нужно для отправки html в качестве ответа с использованием шаблонов руля за один раз.

Рендеринг на стороне сервера создает полную страницу, и все ваши данные должны быть"разобран" и готов.

Вы можете обойти это с помощью AJAX-запроса ( обратите внимание, что это добавляет второй запрос ) и вернуть оттуда JSON-ответ, который вы могли быпросто обработайте его (рекомендуется): 

//somewhere in your page.hbs

    <script>
      const loadObject = () => fetch('/express/path')
                                 .then(response => response.json)
                                 .then(obj => {
                           //do whatever with the obj
    })
      window.onload = loadObject; 

    </script>

И в вашем экспрессе. 

  app.get('/express/path', (req, res) => {
      res.json({
        data: [1, 2, 3]
      })
    })

Вы также можете использовать <script src=/express/to/javascript > для запроса определенного файла .js.И оттуда используйте любую глобальную переменную области видимости.Хорошее обсуждение можно найти по ссылке ниже:

HTML / Javascript: как получить доступ к данным JSON, загруженным в тег сценария с установленным src

...