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:
var zpt = require( 'zpt' ); 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:
var zpt = require( 'zpt' ); 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>