ZPT-JS reference - Configuration - i18n

Syntax

i18n        ::= a javascript object containing urlPrefix and files
urlPrefix   ::= a string
files       ::= an javascript object using files_key and files_value as key and value
files_key   ::= a string
files_value ::= an array of JSON file names
                

Description

The i18n makes it easy the preloading of I18n resources. It is a javascript object containing:

Take a look at this example:

i18n: {
    urlPrefix: './i18n/',
    files: {
        'es': [ 'es1.json', 'es2.json' ],
        'en': [ 'en1.json', 'en2.json' ]
    }
}
                

Then ZPT will preload some files using the next URLs:

After preloading i18n files ZPT-JS defines some variables in the dictionary:

Examples

An example preloading only one language:

"use strict";

var zpt = require( 'zpt' );

var dictionary = {
    ...
};

zpt.run({
    command: 'preload',
    root: document.body,
    dictionary: dictionary,
    i18n: {
        urlPrefix: './i18n/',
        files: {
            'es': [ 'es1.json', 'es2.json' ]
        }
    },
    callback: function(){
        zpt.run();
    }
});
                

And in the template:

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

As the i18n domain forces to use spanish there is no ned to use a data-language attribute to set the language.

If we configure only 1 language we also can use:

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

An example using preloading 2 languages (and using I18nBundle to group i18n resources):

"use strict";

var zpt = require( 'zpt' );

var dictionary = {
    ...
};

zpt.run({
    command: 'preload',
    root: document.body,
    dictionary: dictionary,
    i18n: {
        urlPrefix: './i18n/',
        files: {
            'es': [ 'es1.json', 'es2.json' ],
            'en': [ 'en1.json', 'en2.json' ]
        }
    },
    callback: function(){

        // Add I18nBundle instances to dictionary
        dictionary.i18nBundle1 = new I18nBundle( dictionary.i18nES1, dictionary.i18nEN1 );
        dictionary.i18nBundle2 = new I18nBundle( dictionary.i18nES2, dictionary.i18nEN2 );

        // Run ZPT
        zpt.run();
    }
});
                

And in the template:

<div data-language="'es'" data-domain="i18nBundle">
    ...
</div>
                

Don't forget to declare the language if you use an i18nBundle instance! ZPT-JS needs a data-language attribute to choose the right i18n resources.