访问 pug 文件外的 javascript 对象

Question

我正在尝试使用 Pug 根据来自另一个 .js 文件的数据生成数据列表。我的问题是弄清楚如何让 Pug 读取这个 javascript 对象

我目前有一个包含以下数据的 wizardSpells.js 文件：

// wizardSpells.js
const wiz1 = {};
wiz1['Affect Normal Fires'] = {'school': 'Alteration'};
wiz1['Alarm'] = {'school': 'Abjuration, Evocation'};
wiz1['Armor'] = {'school': 'Conjuration'};

这是我的 datalist.pug 文件的内容：

//datalist.pug
datalist(id='wiz1-spells')
  each val, key in wiz1  
    option(value=val.school) key

当我尝试将 pug 文件编译为 HTML 时出现以下错误：

TypeError: .\pug\datalists.pug:2
  1| datalist(id='wiz1-spells')
> 2|   each val, key in wiz1
  3|     option(value=val.school) key

Cannot read property 'length' of undefined

我的问题显然是我的 javascript 对象在 datalist.pug 文件中未定义。

如何让 Pug 访问我的 javascript 文件和 javascript 对象？ 我非常更喜欢不编辑wizardSpells.js 文件并将所有更改保留在datalists.pug 文件中的解决方案。

---

其他信息

• Pug 已通过 Node 安装，npm install pug-cli
• 我通过 pug-cli 使用以下命令生成我的 html：pug .\pug\datalists.pug -o ./html -P

我的机器上有所有本地可用的文件，因此不需要网络或大型设置。我需要 Pug 做的就是读取本地文件并使用它来生成输出。

Answer 1

您必须从wizardSpells.js 导出对象才能访问它。

// wizardSpells.js
const wiz1 = {};
wiz1['Affect Normal Fires'] = {'school': 'Alteration'};
wiz1['Alarm'] = {'school': 'Abjuration, Evocation'};
wiz1['Armor'] = {'school': 'Conjuration'};
module.exports = { wiz1 };

或者，不要使用pug-cli 包，而是使用pug 包并直接从NodeJS 生成HTML 输出。

// build.js
const pug = require('pug');
const wizardSpells = require('./wizardSpells.js');
const html = pug.renderFile('datalist.pug', wizardSpells);
console.log(html);

Answer 2

使用上面的答案，我设法使它工作。我的最终设置如下所示：

// wizardSpells.js
const wiz1 = {};
wiz1['Affect Normal Fires'] = {'school': 'Alteration'};
wiz1['Alarm'] = {'school': 'Abjuration, Evocation'};
wiz1['Armor'] = {'school': 'Conjuration'};
module.exports = wiz1;

javascript wiz1 对象直接导出，没有任何包装对象。

// build.js
const pug = require('pug');
const fs = require('fs');
const wiz1= require('./wizardSpells.js');
const html = pug.renderFile('../src/datalist.pug', {pretty: true, wiz1: wiz1});
fs.writeFileSync('datalist.html', html);

我必须在我的项目中本地安装 Pug，npm install pug（注意没有 -g 标志）才能使 require() 函数工作。

我在pug.renderFile() 行中将wiz1 对象发送给pug，但似乎pug 无法为“根对象”提供迭代服务，只能访问根对象的属性。因此，我将wiz1 对象包装在另一个对象中，并添加pretty: true 标志以获得很好的缩进HTML。

这现在允许我访问我的 pug 文件中的 wiz1 对象：

// datalist.pug
datalist(id='wiz1-spells')
  each val, key in wiz1
    option(value=val.school)= key

要运行所有内容，我使用以下命令：node build.js

最终的 HTML 如下所示：

<datalist id="wiz1-spells">
  <option value="Alteration">Affect Normal Fires</option>
  <option value="Abjuration, Evocation">Alarm</option>
  <option value="Conjuration">Armor</option>
</datalist>

---

注意：因为我还使用wizardSpells.js 作为最终 HTML 的内容，所以我有一个后处理步骤，在插入之前删除 module.export 行，以避免它破坏 javascript当它被添加到 HTML 并被浏览器加载时。