Pug 模板中的参数不适用于 onclick 事件

Question

我有一个带有按钮的哈巴狗模板test.pug。单击时，我希望按钮调用一个函数，该函数使用从渲染端点传递给模板的参数。这是模板：

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type="text/javascript").
        window.addEventListener('DOMContentLoaded', function(){
            document.getElementById('play-button').addEventListener('click', async () => {
                console.log(testvar);
                console.log('ready');
            });
        }, false);
  body
    button(type = 'button' id = 'play-button') Click to play

这里是渲染 pug 模板的端点：

const express = require('express');
const router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) { 
    res.render('test',{
        title:'Player',
        testvar:'testvar'       
    });
});

module.exports = router;

但是当我加载页面并点击按钮时，我得到了这个错误：

Uncaught (in promise) ReferenceError: testvar is not defined
at HTMLButtonElement.<anonymous>

如果我注释掉console.log(testvar)，代码可以正常工作，所以我知道onclick 事件处理程序已成功添加。所以显然事件处理程序是在参数传递给模板之前添加的。

如何使 onclick 事件可以访问参数？

Answer 1

通过 Express 的 .render() 方法传递的局部变量仅对 Pug 可用，并且仅在 Pug 在服务器上编译时可用。一旦 Pug 被编译为 HTML 并发送到浏览器，它们就不再对客户端 JavaScript 可用。

如果您希望它们在客户端可用，则必须使用 Pug interpolation 在 script 标记内定义变量，以及您的其他客户端 javascript。

假设testvar 是一个字符串，你可以这样处理它：

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type="text/javascript").
      const testvar = '#{testvar}'; // interpolate the value from Pug
      window.addEventListener('DOMContentLoaded', function() {
        document.getElementById('play-button').addEventListener('click', async () => {
          console.log(testvar);
          console.log('ready');
        });
      }, false);
  body
    button(type = 'button' id = 'play-button') Click to play

如果testvar 是数组或对象，则需要使用JSON.stringify() 方法将数组或对象打印到script 标记中。