Localization / Internationalization for Polymer 1.0
I am looking for solutions for Polymer 1.0 and still I am having a hard time understanding how this works. Found this https://github.com/Polymer/i18next-element which unfortunately is not ready yet. Meanwhile, I cannot figure out how to use i18next. I am trying to combine all the information I can find and then https://github.com/tabacha/javascript-i18n-example/blob/master/i18next/examle.html with any combinations from http://i18next.com/ pages / sample.html and don't forget to take a look at http://japhr.blogspot.gr/2014/02/getting-started-with-i18next-and-polymer.html... Thing is, I seem to have messed up everything, even the very first initialization that imports the required JSON. For starters, 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 it really that hard 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 application has a list of all the button labels where the labels are stored in the JSON file selection language. so in properties I got an empty type button_list: Array property. then in ready: function () I follow the steps from the documentation (after importing 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 recognize buttonvalue1 and 2 as undefined.
PS: I noticed that a lot of people use Dart, I haven't used it before, so so far I've only tried the solutions mentioned above.
source to share
It turns out that internationalization / localization in Polymer 1.0 is indeed possible with i18next as long as the feature set is used correctly and limited within the function that fires the language selection event.
Inside the language select function here's the syntax I typed (in 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 secondaryfunction
is scoped from across the page and used in secondaryfunction
where (if double-binding is done correctly) the collection remains updated. The thing is to be careful about when and how functions are loaded.
source to share
This may not be a direct answer to your problem, but it is a solution nonetheless. We've made our own i18n behavior in Polymer 1.0.
After the element implements the behavior, you can write the template like this:
<template>
<span>[[localize('myString', locale)]]</span>
</template>
and it will look for the key myString
in the object locale
and return the localized string.
You can also call the method programmatically using this.localize('myString', locale)
.
source to share
I just posted a simple (highly evolving) item (see his gitlab or read about it here ). It downloads the translation files asynchronously and the usage is pretty straightforward:
<!-- 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 behavior element and translate data bindings like.{{__('hello')}}
- In a global context, just use an object
I18N
like.I18N.__('hello')
source to share