如何在Jade/Pug模板事件处理器中使用控制器传入的模块？

核心问题在于：你在服务器端传给Pug模板的nigeria是服务器运行时的对象，当模板渲染完成发送到浏览器后，前端JavaScript环境完全看不到这个对象，自然会报“nigeria is not defined”错误。要让前端能访问到相关数据，需要把服务器端的nigeria数据序列化后注入到前端全局变量中，具体步骤如下：

方案一：序列化数据到全局变量（纯数据场景） #

如果你的naija对象的states()和lgas()方法只是返回数据列表，建议先在服务器端把所有需要的数据提取出来，转成纯数据对象，再传给模板：

1. 修改服务器端代码 #

// 提取nigeria的所有州和对应的地方政府数据
const nigeriaData = {
  states: naija.states(),
  // 构建州到地方政府的映射表
  lgasMap: {}
};
nigeriaData.states.forEach(state => {
  nigeriaData.lgasMap[state] = naija.lgas(state);
});

res.render('testing', {
  title: "filter setting page",
  nigeria: nigeriaData
});

2. 修改Pug模板代码 #

在模板的script标签中，把服务器端传入的nigeria数据序列化为前端可访问的全局变量，同时修改下拉框的事件绑定：

select.form-select.col-xs-12.col-sm-12(id='selState1', onChange='listLgas(this)')
  each state in nigeria.states
    option(value=state) #{state}

select.form-select.col-xs-12.col-sm-12(id='selLga1')

script(type='text/javascript').
  // 把服务器端的nigeria数据注入为前端全局变量
  const nigeria = !{JSON.stringify(nigeria)};

  function listLgas(element) {
    const selectedState = element.value;
    const lgas = nigeria.lgasMap[selectedState];
    const selLga1 = document.getElementById('selLga1');
    
    selLga1.innerHTML = '';
    lgas.forEach(lg => {
      selLga1.add(new Option(lg, lg));
    });
  }

方案二：保留方法逻辑（需复用服务器端方法逻辑） #

如果必须在前端复用states()、lgas()这类方法的逻辑，需要把方法的JavaScript代码在前端重新实现，基于序列化后的数据来运行。比如：

script(type='text/javascript').
  const nigeriaData = !{JSON.stringify(nigeria)};
  
  // 前端实现对应的方法
  const nigeria = {
    states() {
      return nigeriaData.states;
    },
    lgas(state) {
      return nigeriaData.lgasMap[state];
    }
  };

  function listLgas(element) {
    const selectedState = element.value;
    const lgas = nigeria.lgas(selectedState);
    const selLga1 = document.getElementById('selLga1');
    
    selLga1.innerHTML = '';
    lgas.forEach(lg => {
      selLga1.add(new Option(lg, lg));
    });
  }

关键说明 #

• Pug模板中的!{}语法用于不转义输出内容，这样服务器端的JSON字符串会被直接解析成前端的JavaScript对象。
• 不要直接把服务器端的带方法的对象序列化，因为JSON只能序列化数据，无法保存函数，序列化后方法会丢失。

内容的提问来源于stack exchange，提问作者Femi