Implement Internationalization (i18n) using Backbone.js and handlebars.js

This tutorial will explain how to Implement Internationalization (i18n) using Backbone.js and handlebars.js without using any 3rd party plugin

Let's start our tutorial. From this tutorial, we going to cover how to implement i18n and variable Substitution in backbone.js and handlebars.js

how to Implement Internationalization (i18n) using Backbone.js and handlebars.js?

Dependency

jQuery
Backbone.js
Handlebars.js

Load i18n model

In below snippet, inside "paths object" declared i18n and the path. In download pack can find i18n model file and app.js which has the below code. User can modify the path where the i18n (Internationalization) file has placed

require.config({

    baseUrl: 'js/lib',

    paths: {
        app: '../app',
        tpl: '../tpl',
        i18n: '../app/i18n/i18n'
    },

    shim: {
        'backbone': {
            deps: ['underscore','jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'handlebars': {
            exports: 'Handlebars'
        }
    }
});

Call i18n model inside view

var i18n = require('i18n');
var i18nLg = new i18n({lg:"en_lg"});

i18n Backbone Model code

define( ['jquery', 'backbone', 'handlebars'] , function($, Backbone, Handlebars) {
    var i18n = Backbone.Model.extend({
        initialize: function(args){
            this.lg = args.lg;
            this.returnLgConstant(args.lg);
            this.registerTplHelper();
        },

        registerTplHelper: function(){
            var t = this;
            Handlebars.registerHelper('i18n', function(key,options) {
                var varSubstitution = $.map(options.hash, function(value, index){
                    return value;
                });
                if(key){
                    return new Handlebars.SafeString(t.getKeyVal(key,varSubstitution));
                }else{
                    return new Handlebars.SafeString("");
                }
            });
        },

        returnLgConstant : function(lg){
            var t = this;
            t.lg = lg;
            $.get("js/json/lg/"+ lg +".json",function(data){
                t.i18n = data;
            });
        },

        getKeyVal : function(key,varSubstitution){
            return this.loadAndParseData(key,varSubstitution);
        },

        loadAndParseData : function(key,varSubstitution){
            var t = this;
            if(!this.isNull(varSubstitution) && varSubstitution.length){
                return t.replaceWord(varSubstitution,t.i18n[key]);
            }else{
                return t.i18n[key];
            }
        },

        isNull:function (data) {

            var isNotValid = false;
            try {
                if (typeof data === "undefined") {
                    isNotValid = true;
                } else if (data === null) {
                    isNotValid = true;
                }
            } catch (e) {
                isNotValid = true;
            }

            return isNotValid;
        },

        replaceWord : function(array,string) {
            var i = 0,
                t = this,
                l = array.length,
                value = string;
            for (;i<l;i++) {
                value = value.replace("{"+i+"}",array[i]);
            }
            return value;
        }

    } );

    return i18n;
} );

In above code, i18n model has Handlebars.js helper function which help to bring i18n concept inside Handlebars.js template.

How to call i18n inside Handlebars.js template?

JSON Sample format

{
    "name":"Hi {0}",
    "good":"How are you?"
}

call i18n inside Handlebars.js html templates

{{i18n "good"}}
// Output : How are you?

Variable Substitution

{{i18n "name" 0="Kavi"}}
// Output : Hi Kavi

In above example, i18n is handlebars.js helper function and inside double quotes is key and 0="Kavi" is Variable Substitution (can pass more than one Variable Substitution). So helper function will look for the passed key and will return the key value.

How to call i18n inside Backbone.js?

i18n in Backbone.js

var key = "name";
var varSubstitution = ["Kavi"];
i18nLg.getKeyVal(key,varSubstitution);
// return : Hi Kavi

Language Switch

i18nLg.returnLgConstant(lg);
// In this demo language name should match with language json file name

Please like and share this article if you like this page. Do comment if you have any queries

Download Demo