Marko

Question 1

out.global

Answer 1

out is made available to components in certain lifecycle methods – onCreate(input, out), onInput(input, out), and onRender(out). In one of those, assign the value you’d like to this in order to make it accessible elsewhere in the class:
class {
onCreate(input, out) {
this.message = out.global.message
}

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

For non-top-level components, state and properties are not automatically serialized, so the above code would cause this.message to be set in the component on the server, but that property would be undefined on the client.

To make out.global.message available on the client to non-top-level components, you have to change the render function to specify that it should be serialized, as in the docs on server-side rendering:

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