By default, most webapplications are created in a single language: English. This seems like a good idea, since more then 50% (according to W3C) of all the pages in the Internet are written in this language. On the other hand, almost 46% isn't written in English, so it's a good idea to think about i18n when you start your project.

To get translations working in a MarionetteJS-app, you have to go over these steps:

Set your i18n-options to translate Handlebars templates:

var i18NOptions = {

 lng: window.navigator.userLanguage || window.navigator.language || 'nl',

 fallbackLang: 'nl',

 fallbackNS: 'app',

 fallbackToDefaultNS: true,

 resStore: {

   nl: {

     app: require('./locales/nl/app.json'),

     workorder: require('./locales/nl/workorder.json')

   },

   en: {

     app: require('./locales/en/app.json'),

     workorder: require('./locales/en/workorder.json')

   }

 },

 useCookie: false,

 debug: true

 };

Initialize i18n when the app starts:

App.on("start", function(options){

 App.i18n = i18n || 'en-US';

 App.i18n.init(i18NOptions);

 });

Next, we create a Handlebars helper:

Handlebars.registerHelper('t', function(i18n_key) {

 if(!i18n_key) {

 return i18n_key;

 }

 var result = App.i18n.t(i18n_key);

 return new Handlebars.SafeString(result);

});

Use this helper as follows:

{{t "namespace:my.key" }}