We recently added Japanese support to our webapp. When implementing it, we decided on the most straight-forward method of converting it at run-time by adding a helper method to the view.

The first step was to extend Backbone.View to include a translate method (abbreviated as 't' to reduce noise in the template). It performs a simple dictionary lookup. It falls back to English if a suitable translation can not be found.

BaseView = Backbone.View.extend({ t: function(str, skip) { // check if the browser/system language is Japanese var lang = 'ja' var dictionary = { 'US': {}, 'ja': { 'Dashboard': 'ダッシュボード', 'Layouts': 'レイアウト', 'Cameras': 'カメラ', 'Users': 'ユーザー', 'Map': 'マップ', 'Installer Tools': 'インストールツール', 'Status': '状態' } } return dictionary[lang][str]== undefined ? str : dictionary[lang][str]; } });

And the specific view needs to be changed.

AddCameraMessageView = Backbone.View.extend({

gets changed to be

AddCameraMessageView = BaseView.extend({

The individual templates now can use the new translate helper method on any string.

<tr> <td>Device</td> <td>Name</td> <td>Status</td> </tr>

gets changed to be

<tr> <td><%= this.t('Device') %></td> <td><%= this.t('Name') %></td> <td><%= this.t('Status') %></td> </tr>

The next iteration will perform this translation at the build phase by writing a grunt plugin instead of at run-time. This will remove any rendering time penalty for our users.