Traducciones

Si se configura correctamente, Owl puede traducir todas las plantillas renderizadas. Para ello, necesita una función de traducción, que toma una cadena y devuelve una cadena.

Por ejemplo:

const translations = {
  hello: "bonjour",
  yes: "oui",
  no: "non",
};
const translateFn = (str) => translations[str] || str;

const app = new App(Root, { templates, tranaslateFn });
// ...

Consulta la página de configuración de la aplicación para obtener más información sobre cómo configurar una aplicación Owl.

Una vez configurada, todas las plantillas renderizadas se traducirán usando translateFn:

• Cada nodo de texto será reemplazado con su traducción,
• También se traducirán cada uno de los siguientes valores de atributo: title, placeholder, label y alt,
• Los nodos de traducción de texto se pueden deshabilitar con el atributo especial t-translation, si su valor es off.

Entonces, con el translateFn anterior, las siguientes plantillas:

<div>hello</div>
<div t-translation="off">hello</div>
<div>Are you sure?</div>
<input placeholder="hello" other="yes"/>

Se representará como:

<div>bonjour</div>
<div>hello</div>
<div>Are you sure?</div>
<input placeholder="bonjour" other="yes"/>

Tenga en cuenta que la traducción se realiza durante la compilación de la plantilla, no cuando se renderiza.

En algunos casos, resulta útil poder ampliar la lista de atributos traducibles. Por ejemplo, es posible que también queramos traducir los atributos data-title. Para ello, podemos definir atributos adicionales con la opción translatableAttributes:

const app = new App(Root, { templates, tranaslateFn, translatableAttributes: ["data-title"] });
// ...

También es posible eliminar un atributo de la lista predeterminada anteponiéndole el prefijo -:

const app = new App(Root, {
  templates,
  tranaslateFn,
  translatableAttributes: ["data-title", "-title"],
});
// data-title attribute will be translated, but not title attribute...