The Mount Handle

Last lesson you called App.mount(input, node) and threw the return value away. But .mount() hands back an instance handle — the way to drive a mounted app from the outside, which is exactly what you need when Marko is one island in a page you don’t otherwise control.

const instance = App.mount({ name: "Ada" }, document.getElementById("app"));

The handle has three members:

• instance.update(input) — feed the template new input; it re-renders reactively, and synchronously.
• instance.destroy() — remove the app and run cleanup, aborting every $signal inside it.
• instance.value — read the value the template exposes through a <return> tag (and, if that return is assignable, write it too).

And mount takes an optional third argument, position — where to place the app relative to the node, using the same names as insertAdjacentHTML: "beforeend" (the default) appends inside the node, "afterbegin" prepends, and "beforebegin"/"afterend" place it outside. This project already puts it to work: #app has a note sitting in it, and src/main.js mounts with

App.mount({ name: "Ada" }, document.getElementById("app"), "afterbegin");

so the app lands above that note. Change "afterbegin" to "beforeend" and reload — the app drops below the note. That’s position in one line.

Driving it from the page (your job)

The page has two buttons — Rename and Remove — that currently do nothing. They live in index.html, outside the mounted app, so the only way for them to reach it is through its handle. Open src/main.js and wire them up:

document.getElementById("rename").onclick = () => {
  instance.update({ name: "Grace" });
};

document.getElementById("remove").onclick = () => {
  instance.destroy();
};

Click Rename and the heading updates — update pushed new input through the very same reactive machinery a parent would use. Click Remove and the app is gone, its cleanup run. Two plain DOM buttons, driving a Marko app that has no idea they exist.

That’s the mount handle: update to feed it, destroy to end it, value to read or set what it returns — the controls for a Marko app running as a guest in someone else’s page.