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时，该参数将绑定到窗口。（ctx.render只是执行已生成的compiledTemplate-function pug）;

Answer 2

我可以找到解决方案。感谢@ 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。

如何将外部javascript文件中的外部变量用于index.pug？

3 个答案: