mount

mount(parentElement, func): void

Defined in: aberdeen.ts:3204

Attaches a reactive Aberdeen UI fragment to an existing DOM element. Without the use of this function, A will assume document.body as its root.

It creates a top-level reactive scope associated with the parentElement. The provided function func is executed immediately within this scope. Any proxied data read by func will cause it to re-execute when the data changes, updating the DOM elements created within it.

Calls to A inside func will append nodes to parentElement. You can nest derive or other A scopes within func. Use unmountAll to clean up all mounted scopes and their DOM nodes.

Mounting scopes happens reactively, meaning that if this function is called from within another (derive or A or mount) scope that gets cleaned up, so will the mount.

Parameters

parentElement

Element

The native DOM Element to which the UI fragment will be appended.

func

() => void

The function that defines the UI fragment, typically containing calls to A.

Returns

void

Example

Basic Mount

// Create a pre-existing DOM structure (without Aberdeen)
document.body.innerHTML = `<h3>Static content <span id="title-extra"></span></h3><div class="box" id="app-root"></div>`;

import A from 'aberdeen';

const $runTime = A.proxy(0);
setInterval(() => $runTime.value++, 1000);

A.mount(document.getElementById('app-root'), () => {
  A('h4#Aberdeen App');
  A(`p#Run time: ${$runTime.value}s`);
  // Conditionally render some content somewhere else in the static page
  if ($runTime.value&1) {
    A.mount(document.getElementById('title-extra'), () =>
      A(`i#(${$runTime.value}s)`)
    );
  }
});

Note how the inner mount behaves reactively as well, automatically unmounting when it’s parent observer scope re-runs.