Skip to content

MAIN CONCEPTS

Jump to bottom
Paula edited this page Nov 15, 2021 · 1 revision

COMPONENTS

A vox component is a plain object associated with a section of markup.

Components can have any data and functionality.

Using the vox directive, you can create new anonymous components directly in HTML.

<div vox="{}">
  ...
</div>

You can also extend the vox.api object with custom named components and reference them by name in HTML.

vox.api.component = {};
<div vox="component">
  ...
</div>

Components can be represented as factory functions ↗ for extra customizability and reusability.

vox.api.component = () => ({});
<div vox="component()">
  ...
</div>

‎

HOOKS

‎

init()

DESCRIPTION
Called after the component is created, when all data is available, before any bindings are applied.

vox.api.component = {
  init() {
    console.log('init 👋');
  }
};

‎

exit()

DESCRIPTION
Called before the component is permanently destroyed.

vox.api.component = {
  exit() {
    console.log('exit 👋');
  }
};

‎

CONTEXT

A vox context is a collection of data and functionality.

Inside functions, this always refers to the current context, which can either be the app context or an element context.

The app context is the global context of your application. It is created once, when you first initialize vox. Any data that exists in this context is also available in all other contexts created within your application.

You can add your own global data by accessing the vox.api.app component.

vox.api.app.lang = 'en';
<html vox:lang="lang">
  ...
</html>

Every element initialized by vox has a corresponding context. This context provides access to data declared with the vox directive, both on the element itself and on its ancestor elements.

<div vox="{
  x: 0,
  y: 1,
  get z() {
    return this.x + 1;
  }
}">
  x is <var vox:text="(x)"></var> (0)
  y is <var vox:text="(y)"></var> (1)
  z is <var vox:text="(z)"></var> (1)
  <div vox="{ x: 1 }">
    x is <var vox:text="(x)"></var> (1)
    y is <var vox:text="(y)"></var> (1)
    z is <var vox:text="(z)"></var> (2)
  </div>
</div>

Additionally, there are a few properties and methods that are available in all contexts.

‎

PROPERTIES

‎

this.app

TYPE
Object (Proxy)

DESCRIPTION
A readonly reference to the global app context.

‎

this.el

TYPE
Element

DESCRIPTION
A readonly reference to the current element.
In the app context, this property is null.

‎

this.els

TYPE
Object (Proxy)

DESCRIPTION
A readonly object of elements registered with the vox:is directive.

‎

METHODS

‎

this.emit()

PARAMETERS
event: string
detail?: any

DESCRIPTION
Creates and dispatches a bubbleable, cancelable browser event.

‎

this.vox()

PARAMETERS
q: number | string | Element

RETURNS
context: Object (Proxy)

DESCRIPTION
Retrieves an element's vox context.

  • if q is undefined, it returns the current context;
  • if q is a positive integer, it travels up the DOM tree q times and returns the last element's context;
  • if q is a string, it invokes document.querySelector(q) and returns the selected element's context;
  • if q is an element, it returns the element's context.
Clone this wiki locally