How to use internationalization inside handlebars template

Hi,

I have a Marionnette view which I based off the default hello world widget that you can automatically build using the generator and CSUI-SDK. The view has a templateHelper which is where it gets all the handlebars patterns. Now, I want to internationalize my widget, moving all my strings into an nls/lang.js file. I can easily access the i18n plug-in's lang object to get any string in the lang.js file, but where I am stuck is how do I now get that into a handlebar template?

I know that in my templateHelper, I *could* return every single stupid string in the lang.js file as part of the return of the helper function (that's where I'm getting my basic substitutions.

That is, inside my widget view....

var MyWidgetView = Marionette.ItemView.extend({

Find more posts tagged with

Comments

HFCDev

...let's try this again. I tried to do a tab and ended up submitting.

continuing from where I left off....

var MyWidgetView = Marionette.ItemView.extend({

// template, events, etc. defined

templateHelpers: function() {

//my code here

return {

var1: this.model.get('var1'),

var2: this.model.get('var2'),

// this is what I don't want to have to do

string1: lang.string1,

string2: lang.string2,

//ad nauseum

}

All this so that inside my HBS template, I can access my i18n tags as {{string1}}, {{string2}}, etc.

I saw one place on stack overflow where the suggestion was to "require" the handlebars object itself, and do something like Handlebars.registerHelper('I18n', function(str) {

return lang.hasOwnProperty(str) ? lang[str] : str;

}

I might try that, I'll just need to add the reference to Handlebars to my require listing. Wondered if there was a simpler way, or more of a best practices.

Thanks in advance

-Hugh

HFCDev

PS, to answer my own question, I was able to pass in the Handlebars object.

In my require statement it was something like csui.define(['csui/lib/handlebars', 'i18n!greetings/widgets/hello/impl/nls/lang.js', ....the other libraries], function(Handlebars, lang,....all the rest) { ...

(in case anyone is wondering what the reference would be to include the Handlebars object).

Just before the statement which defines the view, you would add

Handlebars.registerHelpder('i18n', function(str) {

return (lang.hasOwnProperty(str)) ? lang[str] : str;

});

And inside your handlebars template, you would access your strings using this tagging syntax:

which would retrieve the value of 'label1' from your nls/lang.js file.

-Hugh

HFCDev

To answer my own question again, I managed to find an example embedded in the source that is even better. No need to pass in Handlebars object, no need to register a new helper. Within your templatesHelper, in the return object, just return the lang object that is already passed into your view. So if your return object had say

{

node: node,

foo: foo,

bar: bar

}

just change it to

{

node: node,

foo: foo,

bar: bar,

lang: lang

}

and in your template, where you'd access "foo" and "bar" using {{foo}} and {{bar}}, you access your NLS values as {{lang.label1}} or {{lang.label2}}

I'm hoping this will save some folks some time in the future.

-Hugh

HFCDev

I read this back 2 years later and it took me a little bit of time to understand what I was talking about, so let's provide a little context. I have a Marionette View with an associated handlebars template. Let's use the rename example from the SDK. In the View class, it starts off with with a call to a constructor method:

csui.define(['csui/lib/jquery', 'csui/lib/marionette',
 'i18n!ccmemlc/commands/rename/impl/nls/lang',
 'hbs!ccmemlc/commands/rename/impl/rename',
 'css!ccmemlc/commands/rename/impl/rename'
], function ($, Marionette, lang, template) {
 'use strict';

 var RenameView = Marionette.ItemView.extend({

   constructor: function RenameView(options) {
     Marionette.ItemView.prototype.constructor.apply(this, arguments);

     this.model.set({
       uniqueId: this.cid,
       newName: this.model.get('oldName'),
       lang: lang
     });
   },

What you are doing is adding the lang object to your model so it is queryable just like any other object in your model.

In the rename example, they add to the model fields uniqueId and newName as well.

In the handlebars template, you access these using {{uniqueId}}, {{newName}}, and {{lang.whateverYourTagIs}} assiming you created a lang.js file which had something like

define({
whateverYourtagIs: 'Some really insightful text'
});

Hopefully this will be useful to someone in the future, quite probably me in 2 years after I forgotten everything about Smart UI.

-hugh

Jan Velas

Hello Hugh,

I've always seen it getting used in templateHelpers as lang.this or lang.that, so it's good to see you can pass the whole lang and access it straight from handlebars.

This actually makes a lot of sense, after realizing that the .hbs template gets access to the whole serialized model (everything in model.defaults or otherwise set on the object).

Thanks for helping me realize

Jan