访问 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 已通过节点安装 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.

现在我可以访问哈巴狗文件中的 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 的内容，所以我有一个 post 处理步骤删除module.export 行，在插入之前，避免它在添加到 HTML 并由浏览器加载时破坏 javascript。

访问 pug 文件外的 javascript 对象

Access javascript object outside pug file

javascript

file

external

pug