saponifi3d
commented
9 years ago This is the way that I've got it all setup, it works pretty well for us :)
// app/app.js
module.exports = BaseApp.extend({
initialize: function() {
this.polyglot = new Polyglot();
...
},
// This is called directly on the server so we can use Polyglot
// during server rendering.
setPhrases: function(phrases) {
this.polyglot.extend(phrases);
},
// The `start` method only gets called in the client on pageload.
start: function() {
// This sets the phrases in the client-side so we can use Polyglot
// during client rendering. The phrases are accessible with
// `this.get('phrases')` because in the middleware (below) we set
// them as an app attribute. An app's attributes are serialized as
// JSON and bootstrapped to the client.
this.setPhrases(this.get('phrases'));
// If you have lots of phrases, you may as well free up some memory
// because they will no longer be accessed directly from `this.get()`.
this.unset('phrases');
...
},
...
});
// server/middleware/initI18n.js
module.exports = function() {
return function(req, res, next) {
// Fetch phrases from API or cache based on req.
// Example fake method:
fetchPhrasesBasedOnReq(req, function(err, phrases) {
if (err) next(err);
// Set the phrases so they're usable on the server during
// view rendering, etc.
req.rendrApp.setPhrases(phrases);
// Now set them as app attributes so they get serialized and
// bootstrapped onto the page as JSON so we can use them in
// the client.
req.rendrApp.set({phrases: phrases});
next(err);
});
};
};after that I created a handlebars helper to do the translation:
t: function (phrase, options) {
return this.app.polyglot(phrase, options.hash);
}that way in your template you can simply inline the button like this: <button>{{ t 'button_text' }}</button>
Dynamically changing the language is a bit harder cause you'll have to deliver all of the translations on page load. The way I've gotten around that is to simply refresh the page to display the new locale. That way you only need to deliver what is being used by the client at that time.
If it's a requirement to do the translations on the client-side only, you might just want to look at the structure of the phrases and maybe have it be a JSON structure that is locale + phrase => translation
cristodcgomez
pjanuario
Hi! I'm having some troubles to load polyglot in client side of my service.
My goal is having 2 buttons that when I click on one of them, the service call extend() method of polyglot and load the language desired. But, I only can load a new instance of polyglot in here:
app/app.js
I also overwrote handlebarshelper. to get it working:
Notice that I have t() and tc(), because my polyglot needs to translate in layout and in the templates of each view, so i use t() in layout and tc in other case.
to get it working, I'm using JQuery to get when someone clicks on the correct button, and I'm setting this in app/view/base.js
I think that it's ugly code, but I'm in a hurry so I need help :confounded: . Thank you in advance