我正在嘗試使用 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 做的就是讀取本地檔案并將其用于生成輸出。
uj5u.com熱心網友回復：
您必須從中匯出物件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);
uj5u.com熱心網友回復：
使用上面的答案，我設法使它起作用。我的最終設定如下所示：
// wizardSpells.js
const wiz1 = {};
wiz1['Affect Normal Fires'] = {'school': 'Alteration'};
wiz1['Alarm'] = {'school': 'Abjuration, Evocation'};
wiz1['Armor'] = {'school': 'Conjuration'};
module.exports = wiz1;
javascriptwiz1物件直接匯出，沒有任何包裝物件。
// 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);
我在行中將wiz1物件發送到 pug pug.renderFile()，但似乎 pug 無法為“根物件”提供迭代服務，只能訪問根物件的屬性。因此，我將wiz1物件包裝在另一個物件中，并添加了pretty: true標志以獲得良好縮進的 HTML。
這現在允許我訪問wiz1我的 pug 檔案中的物件：
// 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.jsas 內容用于我的最終 HTML，所以我有一個后處理步驟module.export，在插入之前洗掉該行，以避免它在添加到 HTML 并由瀏覽器加載時破壞 javascript。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/344662.html
標籤：javascript 文件 哈巴狗 外部的