CODEWITHSUNDEEP
javascriptaureliai18next
Neglected Sanity
Neglected Sanity

Reputation: 1934

dynamic translation with I18Next and Aurelia

I have an aurelia app that I am integrating I18Next with, I have the Aurelia integration working and it was all going smoothly, until I came upon our menu. For normal translations we are just using the html attributes like so...

<a href="somelink" i18n="link1">Link 1</a>

then in translation.json files you have 

{
  link1: "some translation here"
}

and that works great, it translates perfectly. The problem I can't figure out is how to handle dynamic stuff, like for example our menu. We are doing a repeat.for to make the menu, but how do I tell I18Next what key to use from the translations.json file? Here is a simplified example of what I mean.

<li repeat.for="item of router.navigation">
  <a href.bind="item.href" class="${item.isActive? 'is_active' : ''}>
    ${item.title}
  </a>
</li>

Given the above layout, how can you possibly tell I18Next what keys to use for translation, since it is done in a loop. I have tried a few things, but all have failed. I am really stuck here, I need to get this to translate using the translation.json files, but I have no idea how to tell it what key to use for the translation, is it "home", "about", "contact", ...? Any help would be really appreciated. Thank you.

Upvotes: 1

Views: 678

Answers (1)

Jesse
Jesse

Reputation: 3622

Just like any other attribute, you can bind to your i18n attribute with aurelia. Using the following syntax:

<a i18n.bind="'navigation.' + item.title"></a>

I18n will look for a key in your resources file with the name navigation.[item.title], so if the item.title variable equals to "home", it will look for a key named navigation.home.

Upvotes: 2

Related Questions