Question

访问 pug 文件外部的 javascript 对象

2021-10-30

320

javascript file pug external

我正在尝试使用 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 文件中的解决方案。

其他信息

已通过 Node 使用 npm install pug-cli 安装 Pug>
我使用以下命令通过 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 行，以避免在将其添加到 HTML 并由浏览器加载时破坏 javascript。