AEM 6 sightly: How to read variable from language file?

Question

I have the following html:

<div >${'foo' @ i18n}</div>

In my i18n file I have the following:

<foo
            jcr:mixinTypes="[sling:Message]"
            jcr:primaryType="sling:MessageEntry"
            sling:key="foo"
            sling:message="This is dummy text"/>

This is dummy text is displayed in the page. well so far. The problem is that foo is a variable which comes form other template and I read as follow:

${fooValue} //this returns foo

Now to read message from the i18n I tried the following:

<div>${'${fooValue}' @ i18n} </div>

but This displays ${fooValue} in the page. How to read message from the i18n, if I have variable key?

Answer 1

You could use a local template to which you pass the variable identifying your key for the i18n dictionary:

<template data-sly-template.locale="${@ key}">
    ${key @ i18n, locale='de'}    
</template>

<div data-sly-call="${locale @ key='world'}"></div>

Assuming your i18n dictionary has the translation, the output would be:

<div>
    Welt    
</div>

You can also call the locale template from another template in your page:

<template data-sly-template.locale="${@ key}">
    ${key @ i18n, locale='de'}    
</template>

<template data-sly-template.translate="${@ string}">
    <div data-sly-call="${locale @ key=string}" data-sly-unwrap></div>
</template>

<div data-sly-call="${translate @ string='world'}"></div>

The output would be the same as above.