Tengo una plantilla de pug test.pug que tiene un botón. Cuando se hace clic, quiero que el botón llame a una función que use parámetros pasados a la plantilla desde el punto final de representación. Aquí está la plantilla:
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 playY aquí está el punto final que representa la plantilla 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;Pero cuando cargo la página y hago clic en el botón, aparece este error:
Uncaught (in promise) ReferenceError: testvar is not defined at HTMLButtonElement.<anonymous> El código funciona correctamente si comento console.log(testvar) , por lo que sé que el controlador de eventos onclick se está agregando correctamente. Entonces, aparentemente, el controlador de eventos se agrega antes de que los parámetros se pasen a la plantilla.
¿Cómo puedo hacer que los parámetros sean accesibles para el evento onclick?
Las variables locales pasadas a través del método .render() de Express solo están disponibles para Pug y solo están disponibles mientras se compila Pug en el servidor. No permanecen disponibles para JavaScript del lado del cliente una vez que Pug se ha compilado en HTML y se ha enviado al navegador.
Si desea que estén disponibles en el lado del cliente, debe usar la interpolación Pug para definir la variable dentro de una etiqueta de secuencia de script , junto con su otro javascript del lado del cliente.
Suponiendo que testvar es una cadena, podría abordarlo de esta manera:
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 Si testvar es una matriz o un objeto, deberá usar el método JSON.stringify() para imprimir la matriz o el objeto en la etiqueta del script .