javascript - 如何在 MarkoJS 的非顶级组件中访问 `$global` 或 `out.global`？

Question

我正在尝试从 Marko 组件访问全局变量，但我得到Uncaught ReferenceError: out is not defined.

class {
    onClick(event) {
        console.log(out.global.message)
        event.preventDefault()
    }
}

不应该out.global/$global无处不在吗？

Answer 1

out可用于某些生命周期方法中的组件 - onCreate(input, out)、onInput(input, out)和onRender(out). 在其中之一中，分配您想要的值this，以使其在类中的其他地方可以访问：

class {
    onCreate(input, out) {
        this.message = out.global.message
    }

    onClick(event) {
        console.log(this.message)
        event.preventDefault()
    }
}

---

对于非顶级组件，状态和属性不会自动序列化，因此上面的代码会导致this.message在服务器上的组件中设置，但该属性将在客户端未定义。

要out.global.message在客户端上使非顶级组件可用，您必须更改渲染函数以指定它应该被序列化，如服务器端渲染的文档中所示：

template.render({
    $global: {
        serializedGlobals: {
            message: true
        }
    }
}, res);