Localization/Internationalization for Polymer 1.0

Question

I'm looking into solutions for polymer 1.0 and yet I find it hard to understand how this works. Found this https://github.com/Polymer/i18next-element which is unfortunately not even ready yet. Meanwhile I cannot figure out how to use i18next.I'm trying to combine all the info i can find, followed https://github.com/tabacha/javascript-i18n-example/blob/master/i18next/examle.html with any combinations from http://i18next.com/pages/sample.html and made sure to take a look at http://japhr.blogspot.gr/2014/02/getting-started-with-i18next-and-polymer.html . The thing is, I seem to get wrong everything, even the very first initialization that imports the JSON filed needed. For starters the i18next is based on javascript functions that cannot work inside a polymer ready function due to syntax differences.

So my question is, am i getting something wrong or is this really that difficult to do with polymer? Anyone got a working example to share?

Trying to explain what I mean with an example, let's say that my polymer app has a list of all button labels in it, where the labels are stored in a language of selection JSON file. so in the properties i got an empty buttons_list type: Array property. then in ready: function() I follow the steps from the documentation (after having imported the i18next.js file of course)

var option = { resGetPath: '/localizeddata/english.json' };
          i18n.init(option);
var bvalue1 = i18n.t("buttons.value1");
var bvalue2 = i18n.t("buttons.value2");
this.buttons_list = {value1: bvalue1,value2: bvalue2}

buttons_list seems to be recognizing buttonvalue1 and 2 as undefined values.

PS: I've noticed many people use Dart, i haven't used it before, that is why so far i've only tried the solutions mentioned above.

Answer 1

This may not be a straight answer to your problem but it's a solution nonetheless. We have made our own i18n behavior in Polymer 1.0.

After an element implements the behavior you can write the template as follows:

<template>
    <span>[[localize('myString', locale)]]</span>
</template>

and it will search for the myString key in the locale object and return the localized string.

You can also call the method programmatically using this.localize('myString', locale).

Answer 2

It turns out that internationalization/localization in Polymer 1.0 is indeed possible with i18next if a set of functions are properly used and scoped within the function that triggers the language selection event.

Within the language selection function, here's the syntax that I typed (with more detail)

somefunction: function(){    
  var option = { resGetPath: '/localizeddata/english.json' };
  i18n.init(option);
  (function(ok) {
    i18n.init(function(t) {
      arg = {
        var value1 = i18n.t("buttons.value1"),
        var value2 = i18n.t("buttons.value2")
      }
      ok.secondaryfunction(arg);
     });
  })(this);
}
secondaryfunction:function(n){
    this.buttons_list = n
}

This way what I get from within secondaryfunction is scoped from the whole page and used in secondaryfunction where (if double bound correctly) the collection stays updated. Thing is, must be careful regarding when and how the functions load.

Answer 3

I just published a simple (heavily in development) element (see it on gitlab or read about it here). It loads the translation files asynchronously and the usage is fairly simple:

<!-- Import it in head -->
<link rel="import" href="bower_components/quaintous-i18n/quaintous-i18n.html">
<!-- initialize it in body -->
<quaintous-i18n locales-path="/locales/fa.json"></quaintous-i18n>

Now you can use it in various ways:

• In computed properties: just add I18N as your element behavior and translate your data bindings, e.g. {{__('hello')}}
• In global context just use I18N object, e.g. I18N.__('hello')