App

Cada aplicación Owl tiene un elemento raíz, un conjunto de plantillas, un entorno y posiblemente algunas otras configuraciones. La clase App es una clase simple que representa todos estos elementos. Aquí hay un ejemplo:

const {Component, App } = owl;

class MyComponent extends Component { ... }

const app = new App(MyComponent, { props: {...}, templates: "..."});
app.mount(document.body);

El flujo de trabajo básico es el siguiente: crear una instancia de App configurada con el componente raíz, las plantillas y posiblemente otras configuraciones. Luego, montamos esa instancia en algún lugar del DOM.

API

• constructor(Root[, config]): El primer argumento debe ser una clase de componente (no una instancia) y el segundo argumento opcional es un objeto de configuración (ver a continuación).

• mount(target, options): El primer argumento es un elemento html y el segundo argumento opcional es un objeto con opciones de montaje (ver a continuación). Monte la aplicación en un destino en el DOM. Tenga en cuenta que se trata de una operación asincrónica: el método mount devuelve una promesa que se resuelve en la instancia del componente cuando se completa.

  El objeto option es un objeto con las siguientes claves:

  • position (string): ya sea first-child o last-child. Esta opción determina la posición de la aplicación en el destino: ya sea primer o último hijo.

• destroy(): destruye la aplicación

Configuración

El objeto config es un objeto con algunas de las siguientes claves:

• env (object): Si se proporciona, este será el env compartido que se le dará a cada componente
• props (object): los accesorios dados al componente raíz
• dev (boolean, default=false): Si es “verdadero”, la aplicación se representa en dev mode;
• test (boolean, default=false): El modo test es el mismo que el modo dev, excepto que Owl no registrará un mensaje para advertir que Owl está en modo dev.
• translatableAttributes (string[]): una lista de atributos adicionales que deben traducirse (ver translations)
• translateFn (function): una función que será llamada por owl para traducir plantillas (ver translations)
• templates (string | xml document): todas las plantillas que utilizarán los componentes creados por la aplicación.
• getTemplate ((s: string) => Element | Function | string | void): Una función que Owl llamará cuando necesite una plantilla. Si se devuelve undefined, Owl buscará en las plantillas de la aplicación.
• warnIfNoStaticProps (boolean, default=false): si es verdadero, Owl registrará una advertencia cada vez que encuentre un componente que no proporcione una descripción de propiedades estáticas.
• customDirectives (object): Si se proporciona, se llamará a la función correspondiente en el objeto en las directivas personalizadas de la plantilla: t-custom-* (Ver Directivas personalizadas).
• globalValues (object): Objeto global de elementos disponibles en las compilaciones.

mount helper

Tenga en cuenta que hay un ayudante mount para hacer eso en solo una línea:

const { mount, Component } = owl;

class MyComponent extends Component {
    ...
}

mount(MyComponent, document.body, { props: {...}, templates: "..."});

Aquí está la definición de la función mount:

mount(Component, target, config) con los siguientes argumentos:

• Component: una clase de componente (componente raíz de la aplicación)
• target: un elemento html, donde el componente se montará como último hijo
• config (optional): un objeto de configuración (el mismo que el objeto de configuración de la aplicación)

La mayoría de las veces, el ayudante mount es más conveniente, pero siempre que se necesita una referencia a la aplicación Owl real, es posible usar la clase App directamente.

Cargando plantillas

La mayoría de las aplicaciones necesitarán cargar plantillas cada vez que se inicien. Así es como podría verse en la práctica:

// in the main js file:
const { loadFile, mount } = owl;

// async, so we can use async/await
(async function setup() {
  const templates = await loadFile(`/some/endpoint/that/return/templates`);
  const env = {
    _t: someTranslateFn,
    templates,
    // possibly other stuff
  };

  mount(Root, document.body, { env });
})();

Modo de desarrollo

El modo de desarrollo activa algunas comprobaciones adicionales y comodidades para desarrolladores:

• Props validation se realiza
• t-foreach Los bucles comprueban la unicidad de la clave
• Los hooks del ciclo de vida están envueltos para informar sus errores de una manera más amigable para el desarrollador.
• onWillStart y onWillUpdateProps emitirán una advertencia en la consola cuando tarden más de 3 segundos en un esfuerzo por facilitar la depuración de la presencia de bloqueos.