w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
Home Script Backbone.js
Implement Internationalization (i18n) using Backbone.js and handlebars.js

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

W3TWEAKS by W3TWEAKS
November 26, 2019
in Backbone.js
0

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

You might also like

Sliding menu in backbone.js

Sliding menu in backbone.js

September 21, 2019
0
Simple Dynamic Menus from JSON REST API using backbone.js

Simple Dynamic Menus from JSON REST API using backbone.js

November 13, 2019
0

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

Tags: Backbonebackbone js i18nbackbone js internationalizationbackbone.jshandlebarshandlebars i18nhandlebars.jsi18ni18n in Backbone.jsi18n in handlebarsi18n in requirejsi18n using Backbone.jsInternationalizationInternationalization (i18n) in Backbone.jsInternationalization (i18n) using Backbone.jsInternationalization in Backbone.jsJavascriptrequirejsrequirejs i18n
Previous Post

null and undefined check in javascript

Next Post

Sliding menu in backbone.js

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Sliding menu in backbone.js

Sliding menu in backbone.js

by W3TWEAKS
September 21, 2019
0
0

This tutorial will explain how to implement sliding menu using backbone.js and users can find backbone js slide menu example...

Simple Dynamic Menus from JSON REST API using backbone.js

Simple Dynamic Menus from JSON REST API using backbone.js

by W3TWEAKS
November 13, 2019
0
0

This tutorial will explain how to create simple dynamic menus from JSON REST API using backbone.js and menu navigation in...

Next Post
Sliding menu in backbone.js

Sliding menu in backbone.js

Discussion about this post

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube