Hi, I'm trying to use work from Scott on https://github.com/Polymer/i18next-element to translate my Polymer app.
However, I'd like to use i18next with translations from json files, instead of having them defined in the code (as it is done here https://github.com/Polymer/i18next-element/blob/master/i18n.html). The problem is that i18next loads translation asynchronously, and they are available after elements in my page are rendered. I've tried to fix this issue by creating a wrapping element, using a conditional template that will display the content only when the translations are loaded. This element looks like the following : <polymer-element name="i18n-element"> <template> <template if="{{translationLoaded}}"> <content></content> </template> <template if="{{!translationLoaded}}"> <div> Please wait while translations are loading... </div> </template> </template> <script> PolymerExpressions.prototype._ = function (args) { return i18n.t(args); }; window._ = i18n.t; Polymer('i18n-element', { translationLoaded: false, created: function () { var i18nElement = this; i18n.init({ lng: "en" }, function (t) { console.log('i18n initialized', i18n.t('Hello')); i18nElement.translationLoaded = true; }); } }); </script> </polymer-element> I can then use this element to wrap other elements, for example <i18n-element> <my-element></my-element> <template is="auto-binding"> Inline content: {{_('Hello')}}. </template> </i18n-element> my-element is a simple element that renders a text using {{_('Hello')}} My assertion was that as long as the "translationLoaded" property is false, nothing will be done with child elements of i18n-element. I was apparently wrong as the {{}} expressions in my-element and in the auto-binding template are still evaluated before the translations are loaded. I can fix this issue by telling i18next to load translations synchronously. This setup is actually what Nicolas Bouthors suggested earlier in this thread (wrapping element + synchronous load of dictionaries). I was however wondering if it is possible to have the {{}} expressions evaluated after the translations have been loaded. Sample code (with synchronous loading) can be found here https://github.com/plequang/polymer-i18n, and viewed here http://plequang.github.io/polymer-i18n/ On Thursday, September 11, 2014 11:02:39 PM UTC+2, Eric Bidelman wrote: > > This is an area we're still fleshing out, but Scott did some initial work > on https://github.com/Polymer/i18next-element a while back. You might > find it useful. > > On Thu, Sep 11, 2014 at 1:03 PM, Kelly St. John <[email protected] > <javascript:>> wrote: > >> This was an interesting topic. Have there been any updates on best >> practices for polymer localization support? What are people successfully >> using for polymer apps in this regard? >> >> >> On Thursday, 14 November 2013 23:08:50 UTC-8, Nicolas Bouthors wrote: >>> >>> Do we have à preferred approach to support internationalization of >>> polymer element. >>> For now I see using the binding API as an option, passing dictionaries >>> as a parameter to each element. But doing so is cumbersome for example for >>> elements containing other elements directly or via the content tag. >>> >>> Any better idea? >>> >>> Shouldn't we have a common way, so that all elements inherit from a >>> common dictionary and have some support to retrieve dictionary values from >>> a string, inside a mustache {{}}? >>> >>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >> --- >> You received this message because you are subscribed to the Google Groups >> "Polymer" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected] <javascript:>. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/polymer-dev/07360486-ac06-4ef3-acb5-08a6107c5853%40googlegroups.com >> >> <https://groups.google.com/d/msgid/polymer-dev/07360486-ac06-4ef3-acb5-08a6107c5853%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> For more options, visit https://groups.google.com/d/optout. >> > > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/59bf8560-7a32-4327-9a0c-3b212fdca36d%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
