如何使用外部javascript文件中的外部变量转换为index.pug？

Question

假设我有一个名为myscript.js的外部javascript文件。 它声明了一个名为headArr的变量，它是一个数组。

 headArr = [`id`,`firstname`,`lastname`,`company`,`salary`];

在index.pug ，我包含：

script
        include ../public/script/myscript.js

我使用each迭代来读取数组的每个成员。

ul
  each val in headArr
    li= val

它返回/显示it can't read headArr.length return undefined

Answer 1

那么也许包括您的脚本服务器端是您的选择？

// myscript.js
export const headArr = [`id`,`firstname`,`lastname`,`company`,`salary`];

// Where you do your rendering
import { headArr } from myscript.js
...
await ctx.render(index, { headArr }); 

Pug允许您传入变量作为第二个参数，当渲染{ test: "something" }成为window.test时，该变量将绑定到window。 （ctx.render只是在执行已生成的pug已编译的模板函数）；

Answer 2

我可以找到解决方案。 Thank @ ippi在koa.js中，您只能使用require。

就我而言：在您的脚本中添加

const head = [`id`,`firstname`,`lastname`,`company`,`salary`];

module.exports.head = head;

然后，将index.js添加

const myScript = require('./public/script/myscript');

然后呈现页面

router.get(`/`, async ctx => {
    await ctx.render(`index`,myScript)
});

最后，将“每个迭代”添加到index.pug文件中

            tr
            each i in head
                th= i

Answer 3

router.get(/, async ctx => 
    { await ctx.render ('index', { headArr: headArr} ) 
    });

在myscript.js文件中，可以在渲染index.pub时使用此代码。 由于pug文件将对象作为输入，因此您需要在该对象中传递headArr。