如何将变量传递给 Pug 的 `script.` 块？

Question

我的index.pug文件中有此代码

doctype html
html
  head
    title= title
  body
    script(src=`${source}`)
    script.
      for (var event of events){
        VClient.Event.subscribe(event, createDiv);
      } 

这是我将变量从 Express 传递给 pug 的方式。

var express = require('express');
var app = express();
app.set('view engine', 'pug')

app.get('/', function(req, res){
    var id = req.query.id || 23717;
    var source = `https://some.source.url/${id}.js`;
    res.render('index',
    {title: 'Preview Embed', source: source, events:["AD_START","AD_COMPLETE"]});
});
app.listen(5000);

两者title并source使其进入 pug 文件。但不是events：

Uncaught ReferenceError: events is not defined

如何在script.块内正确传递变量？

Answer 1

您基本上需要以最终结果被插入为有效 JS 的方式呈现您的变量。它可以通过以下方式完成：!{JSON.stringify(events)}

for (var event of !{JSON.stringify(events)}) ...

应该扩展到：

for (var event of ["AD_START","AD_COMPLETE"]) ...

请注意!{}which 用于未转义的插值，而不是更常用的#{}，在这种情况下它不起作用，因为它会扩展为类似["..."]（即转义引号）

注意：未转义的代码可能很危险。您必须确保清理任何用户输入以避免跨站点脚本 (XSS)。请参阅：如何将变量从玉模板文件传递到脚本文件？