问题描述

我有一个带有按钮的PUG模板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事件访问？

推荐答案

通过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标记中。

这篇关于PUG模板中的参数对于onClick事件不可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！