通过渲染持久化发送到 Pug 模板的数据

Question

我正在尝试了解如何保存从 Express 渲染方法传递到我的 Pug 模板的数据。

我将一些 JSON 数据传递给 Express 中的 res.render() 方法，该方法使用 Pug 呈现我的视图。在 Pug 模板上，我立即使用该数据用 JSON 数据中的下拉值填充我的 select 元素之一。

然后我想做的是存储传递的数据，以便我可以在为另一个字段创建的事件处理程序函数中使用它。

基本上，我传递了一个 table 名称和 table 的字段名称，但对于 JSON 数据中的每个 table。

所以形状就像[{ tableName: "table name here", fieldNames: ['field1', 'field2', ...] }, ... ]

我有一个 select 字段用于“选择一个 table 名称”，当用户选择一个 table 名称时，我想暂时获取 fieldNames select 字段，允许他们选择要使用的字段名称。因此，我在“选择一个 table 名称”字段上设置了一个事件处理程序，它运行我在 pug 模板中设置的一个小事件处理程序。唯一的问题是事件处理程序无法访问最初传递给 Pug 模板的数据。

我正在尝试 google 这个，但没有找到任何东西，所以有谁知道我如何在哈巴狗模板中保存通过 res.render() 方法发送的数据，以便在页面之后使用已在事件处理程序或其他函数中呈现？

谢谢！

Answer 1

始终清楚在服务器（哈巴狗）上做了什么，在客户端Javascript（浏览器）上做了什么。

虽然传递给 pug 脚本的数据是要在服务器上使用的，但可以将服务器数据注入客户端 Javascript variables.

以下使用 Express 传递的完全相同的数据在同一页面上创建两个下拉列表。一个是在服务器生成的，而第二个是完全由 Javascript 运行在浏览器中创建的。

快递编码：

app.get("/testdata", (req, res) => {
  res.render("testdata", { data: [ 1, 2, 3, 4, 5]});
});

testdata.pug:

html
  head
  body 
    p Dropdown list generated at the server:
    p 
      select  
        each n in data 
          option(value=n)=n
          br

    p Dropdown list generated in browser Javascript: 
    p 
      select#dropdown

  script.
    document.body.onload = () => {
      const dropdown = document.getElementById("dropdown");
      let data = JSON.parse(`!{JSON.stringify(data)}`); // line 18
      data.forEach(d => {
        const item = document.createElement("option");
        item.innerText = d;
        dropdown.appendChild(item);
      })
    }

我在指向不同实体的完全不同的上下文中使用了相同的变量名。小心不要绊倒。例如，看第 18 行：

   let data = JSON.parse(`!{JSON.stringify(data)}`); // line 18

data 的第一个实例是 浏览器 中的一个 Javascript 变量。
data 的第二个实例是 server 对象传递给 render 方法中的 pug 脚本。基本上在 pug 文件中找到的任何 !{expression} 个实例都会在渲染视图时被评估¹。

¹ 我认为表达式已被求值并调用了它的 toString 方法。如果我知道它是一个数组，我可以使用：

  let data = [!{data}]; // line 18

通过渲染持久化发送到 Pug 模板的数据

Persist data sent to a Pug template via render

model-view-controller

node.js

express

pug