带有组件的 Marko 动态标签

Question

我有一个 marko 网站，其中有一些通过 for 循环调用的动态组件：

/pages/note/index.marko

import layout from "../../layouts/base"

<${layout} title="test">
    <for|card| of=input.cards>
        <${card} />
    </for>
</>

这是给定的一组“注释”（只是其他带有内容的标记文件），我想根据请求动态地填充页面（这在服务器中处理得很好）。它可以正常加载这些注释。

但是，当我让卡片标记文件使用一个组件时，该组件只有一半可以工作。

note1/index.marko

<math>5x+1=11</math>

ma​​th/index.marko

class {
    onCreate() {
        console.log("CREATED") // runs
    }

    onMount() {
        console.log("MOUNTED") // doesn't run
        // eventually I plan to run some math rendering code here
    }
}

<span><${input.renderBody} /></span>

问题是浏览器端永远不会运行。 另外，我在浏览器中遇到了这个莫名其妙的错误 编辑：更改了路由中的渲染。不知何故，错误消失了

routes.js

...
app.get("/note.html", async (req, res, next) => {
    let title = req.query.title || "" // get the requested card
    let dependencies = request(`./notes/${title}/dependencies.json`) || [] // get all of the linked cards to the requested card
    let cards = [title, ...dependencies].map(note => request(`./notes/${note}`)) // get the marko elements for each card
    // by this point, "cards" is a list with marko templates from the /notes/ directory

    // render
    let page = request(`./pages/note`, next)
    let out = page.render({"title": title, "cards": cards}, res)
}
...

---

我的文件结构是这样设置的：

server.js
routes.js
pages/
    note/
        index.marko
notes/
    note1/
        index.marko
    note2...
components/
    math/
        index.marko
layouts/
    base/
        index.marko

使用：node、express、marko 和 lasso。

Answer 1

您的自定义标签 <math> 与 the native MathML <math> element 冲突，这就是为什么您只会在浏览器中收到该错误。

尝试将其命名为其他名称，例如 <Math> 或 <my-math>。