ZPT-JS reference - Attributes - I18nDomain

Syntax

argument ::= expression [ expression ]*
                

Description

The data-domain statement defines one or more expressions that evaluate to one or more sources of i18n resources. If only one expression is defined this is the source of i18n resources; if more than one expression is defined ZPT-JS will look for the resources using the order of the list of expressions: it will try to find the resource in the first expression, if it is not found it will try with the second and so on.

ZPT-JS provides 2 classes that work as source of i18n resources:

I18n class is the most basic of them. It represents a set of translations using a language. The constructor of I18n class accepts 2 parameters: the language (a string) and the translations (an object with strings). An example:

import { zpt } from './zpt-esm.js';
var i18nES = new zpt.I18n(
    'es', 
    { 
        'Hello world!': '¡Hola mundo!'
    }
);

// Init dictionary
var dictionary = {
    'i18nES': i18nES
};

// Parse template
zpt.run({
    root: document.body,
    dictionary: dictionary
});
                

I18nBundle class is a little bit more complex. It groups several I18n instances with the same translations using different languages. The constructor of I18nBundle class accepts one or more I18n instances. ZPT-JS will use the I18n instance depending of the value defined using a data-language statement. An example:

import { zpt } from './zpt-esm.js';
var i18nES = new zpt.I18n(
    'es', 
    { 
        'Hello world!': '¡Hola mundo!'
    }
);
var i18nEN = new zpt.I18n(
    'en', 
    { 
        'Hello world!': 'Hello world!'
    }
);
var i18nBundle = new zpt.I18nBundle( i18nES, i18nEN );

// Init dictionary
var dictionary = {
    'i18nBundle': i18nBundle
};

// Parse template
zpt.run({
    root: document.body,
    dictionary: dictionary
});
                

To make it easy the i18n initialization ZPT-JS provides a configuration option: i18n.

ZPT-JS uses the tr expression to make it easy to translate text, number, dates...

Differences with ZPT

This statement does not exist in ZPT.

Examples

Using an I18n instance:

<div data-domain="i18nES">
    ...
</div>
                

Using 2 I18n instances:

<div data-domain="i18nES2 i18nES1">
    ...
</div>
                

Using an I18nBundle instance:

<div data-domain="i18nBundle">
    ...
</div>
                

Using 2 I18nBundle instances:

<div data-domain="i18nBundle2 i18nBundle1">
    ...
</div>