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:
- urlPrefix. A string ZPT-JS will use as a prefix for the URLs of the files to download.
- files. A javascript object formed with the language id as key and an array of JSON file names as value.
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:
- ./i18n/es1.json as the first file of es language.
- ./i18n/es2.json as the second file of es language.
- ./i18n/en1.json as the first file of en language.
- ./i18n/en2.json as the second file of en language.
After preloading i18n files ZPT-JS defines some variables in the dictionary:
i18n(fileWithoutExtension.toUpperCase)
, for examplei18nES1
. An instance of I18n class per file.i18n(lang.toUpperCase)Array
, for examplei18nESArray
. An array of instances of I18n class.i18nArray
. An array of instances of I18n class but only if there is 1 declared language.
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.