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

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.

Answer 2

The solution by Radu works wonderfully. I have also tried this and this works too, if anyone is looking for a solution without involving templates.
<div>${fooValue # i18n}</div>
I personally would go with templates though. Makes it a little easier to read.
<div>${fooValue # i18n}</div> vs <div data-sly-call="${translate # string=fooValue}"></div>.