In total.js what is the best way to define global constants that i can use in scripts and templates?

Question

For example if i would like to define text messages in multiple languages:

const AVAILABLE_LANGUAGES = ["en", "fr"];
const CONFIRM_BUTTON_TEXT = { "en": "Confirm", "fr": "Confirm in french"};

Then somewhere in a component template be able to use them like:

<button>@{global.CONFIRM_BUTTON_TEXT.en}</button>

or in a component script or controller like:

var default_language = global.AVAILABLE_LANGUAGES[0];

1. where should I define those constants for best practice
2. how can I access them in components with javascript
3. how can I access them in html templates
4. how can I access them in controllers

Answer 1

I recommend to use Total.js Localization with @(Localization markup), example below. Total.js Localization is the answer for your questions.

<button>@(Confirm button)</button>

and usage in JS code on server-side:

var confirmbutton = TRANSLATE('de', 'Confirm button');

Read more: https://docs.totaljs.com/latest/en.html#pages~Localization

---

BTW: If you want to use localization on client-side in JS code, then you can be inspired with j-Resource component: https://componentator.com/components/j-resource/