如何在pug.compile()中使用已定义的table_row混合宏？

你遇到的核心问题是：客户端动态编译的模板字符串里没有包含table_row混合宏的定义，导致Pug无法识别它。以下是两种可行的解决方式：

方法一：将混合宏定义嵌入编译模板 #

直接把table_row的Pug代码拼入要编译的模板内容中，让编译后的模板能直接识别这个混合宏：

const setEvents = (events) => {
    let tbody = document.getElementById('events-tbody')

    const templateSource = `
mixin table_row(event)
    tr 
        td=event.name
        td=event.type
        td=event.time
        td=event.venue
        td
            +dropdown(event.id)

each event in events
    +table_row(event)
    `

    const compile = pug.compile(templateSource)
    tbody.innerHTML = compile({events})
}

注意：原代码里tr嵌套+table_row(event)会生成重复的<tr>标签，这里已经修正，直接调用混合宏即可生成完整的行。

方法二：预编译混合宏为函数，传入模板上下文 #

如果不想重复编写混合宏代码，可以先单独预编译table_row为函数，再将其作为变量传入模板的执行上下文：

1. 预编译混合宏：

// 预编译table_row混合宏并提取函数
const tableRowMixin = pug.compile(`
mixin table_row(event)
    tr 
        td=event.name
        td=event.type
        td=event.time
        td=event.venue
        td
            +dropdown(event.id)
`)
const tableRowFn = tableRowMixin().table_row;

2. 动态编译模板时传入函数：

const setEvents = (events) => {
    let tbody = document.getElementById('events-tbody')

    const compile = pug.compile(`
each event in events
    +table_row(event)
    `)

    // 将预编译好的混合宏函数传入模板上下文
    tbody.innerHTML = compile({events, table_row: tableRowFn})
}

额外提醒：如果模板中用到的dropdown混合宏也在客户端编译时使用，需要用同样的方式处理它，否则也会出现未定义错误。

内容的提问来源于stack exchange，提问作者Inaara Kalani