In the past few weeks I have been digging deeper into Backbone.js, a really cool JavaScript library that gives structure to any web application providing models, collections and views in the client-side. If you want to know more, there are at least a couple of good links out there you should check out: one is the free book Developing Backbone.js Applications by Addy Osmani; the other is the series of posts by Christophe Coenraets in his blog, where you can see real code in action. For modularizing the app I have followed this tutorial using RequireJS.
While developing the app I came to a common issue which is internationalization (i18n), as it was required to support at least two different languages: English and German. And as I didn’t have any previous experience with this on Backbone.js, I decided to choose a modern library like Polyglot.js released two months ago by the guys at Airbnb (you can read more about their experience implementing the new mobile web using Node.js).
It took me a while to figure out how to use Polyglot, but the first thing it’s to properly configure Require to export the Polyglot object:
require.config({
paths: {
jquery: 'libs/jquery',
underscore: 'libs/underscore',
backbone: 'libs/backbone',
text: 'libs/require/text',
polyglot: 'libs/polyglot',
templates: '../templates',
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
polyglot: {
exports: 'Polyglot'
},
}
});
For using Polyglot, we have to instantiate the object and give it a phrases objects with pairs key/value corresponding to the language of the user’s locale. By the nature of our application I have decided to store this locale in the client using the HTML5 local storage capabilities. For the language files I’m using pure JSON objects containing the pairs and storing them into a locales folder.
{
'page': 'Page',
'time': 'Time'
}
{
'page': 'Seite',
'time': 'Zeit'
}
To retrieve the corresponding language file upon initialization of the app, I’m requesting the file through a regular getJSON call with JQuery. Is not a real Backbone-ish way, but I feel that creating a Model could be overkilled. Anyway, as I said, I’m just starting with Backbone so I’m open to any suggestion or recommendation.
define([
'jquery',
'underscore',
'backbone',
'polyglot',
'router', // Request router.js
], function($, _, Backbone, Polyglot, Router) {
var initialize = function() {
var locale = localStorage.getItem('locale') || 'de';
// Gets the language file.
$.getJSON('locales/' + locale + '.json', function(data) {
// Instantiates polyglot with phrases.
window.polyglot = new Polyglot({phrases: data});
// Pass in our Router module and call it's initialize function
Router.initialize();
});
}
return {
initialize: initialize
};
});
After instantiating Polyglot with the phrases retrieved from the JSON file, I assign it to the window object, so we can use polyglot.t() to get the translations in our HTML templates as follows:
<div><%= polyglot.t('time') %></div>
this.blog.name is undefined 
Have u tried with Namespaces? I mean
{
'book': {
'page':"Page",
"section": "Section",
"test":
},
'time': 'Time'
}
Can we use like this:
??
Hi Andrii!
I’ve just tried but is not possible because the way the function t is defined taking the key for the phrases object .
Polyglot.prototype.t = function(key, options) {
…
var phrase = this.phrases[key]
…
};
What you could do is define your language files like this:
{
‘book.page’: ‘Page’,
‘book.section’: ‘Section’,
‘time’: ‘Time’
}
Or you could instantiate more than one Polyglot class with different sets of phrases.
Cheers, Pablo.
Oh I see. Thanks for fast reply. Appreciated. I’m just looking the ideal i18n approach, and there are some libraries which support namespaces as I expect.
But Polyglot doesn’t. Will try to get more deep research.
But anyway thanks for this post. Helpful.
Pingback: X-ation on JavaScript | Work'n'Me
Thanks for the tutorial. But how can we output the result in HTML without using underscore templating?
Hi Ibrahim!
If you don’t want to use a templating engine it will get a bit tricky but you can do something like this:
<div id="hello"></div> <script> window.polyglot = new Polyglot({phrases: {"hello": "Hola"}}); var hello = polyglot.t('hello'); var div = document.getElementById('hello'); div.appendChild(document.createTextNode(hello)); </script>Cheers.