Localized templates with Handlebars / Mustache

#coffeescript

#backbone

#amd

#handlebars

#internationalization

#marionette

Currently I'm using AngularJS + JADE combo in almost all of my projects but before that time I had a lot of fun with Backbone / Backbone Marionette.

Some time ago one of our customers decided to localize whole web app which already contained a quite large front end codebase, client-side templating and Backbone / Marionette, Handlebars, require.js under the hood.

At the same time, we were launching new version of the app and didn't want to refactor almost everything, in other words - we wanted to minimize the impact of another new feature, yet still - we wanted to keep things clean, simple and easy to maintain.

That's the solution I came up with. Hope you'll find it helpful.

Tools

I decided to use i18n plugin for require.js

Translator class

I've created a CoffeeScript class which returns a compile() method for currently selected language version:

# file: modules/localized-template.coffee
define (require)->
 _ = require 'lodash'
 Handlebars = require 'handlebars'

 LocalizedTemplate = (dict, tpl) ->
 (model)->
 dictModel = 
 i18n : dict
 params = _.extend {}, model, dictModel
 rendered = Handlebars.compile tpl
 rendered params

Thanks to _.extend method we are able to preserve all strings / view model data created in the view controller and override only necessary strings.

View

# file: modules/view-name/view-controller-name.coffee
define (require)->
 require 'jquery'
 require 'backbone'
 require 'Backbone.Marionette'
 Handlebars = require 'handlebars'

 VideoView = require './video'
 StreamTemplate = require 'text!./tpl/stream.tpl'

 # most important part: 
 LocalizedTemplate = require 'cs!modules/localized-template'

 i18n = 
 ui : require 'i18n!nls/ui' 

 StreamView = VideoView.extend
 # here we swap Handlebars.compile method:
 template : LocalizedTemplate i18n, StreamTemplate
 tagName : 'li'
 StreamView

Template

That's quite simple: we place localized strings under i18n.ui.variableName.

# file: modules/view-name/tpl/stream.tpl
<div class="icon">
 <img width="240" height="135" src="{{#if posterUrl}}{{{posterUrl}}}{{else}}/img/video-list/not-found.png{{/if}}" alt="{{title}}">
 <div class="labels">
 <span class="language">{{language.label}}</span>
 <div class="specializations">
 {{#each specializations}}
 <span class="specialization">{{name}}</span>
 {{/each}}
 </div>
 </div>
</div>
<div class="description">
 <div class="title">{{title}}</div>
 <div class="author">{{author}}</div>
 <div class="affiliation">{{affiliation}}</div>
 <div class="labels">
 <span class="date">{{parsedStartTime}}</span>
 <button class="subscribe">{{i18n.ui.subscribe}}</button> 
 </div>
</div>

It's important not to pollute "global" template scope. What if there was a localized variable called specializations = "Specialisierung"? In this case it would be overwritten by array pulled from JSON. That's just evil.