How to use variables with handlebars

[lenovouser]

According to the documentation at the templates section it is possible to use variables in Jade like this:

p=t("my.translation.key", { my: "variable" })

how can I make this work with handlebars?

This:

<p>{{t 'my.translation.key', [ my: "variable" ] }}</p>

This:

<p>{{t 'my.translation.key', { my: "variable" } }}</p>

And this:

<p>{{t 'my.translation.key', ( my: "variable" ) }}</p>

all crash with:

Error: /Users/github/Documents/i18n_hbs/views/home.hbs: Parse error on line 115:
...al.nav.link.testing', ( my : "variable" ) 
-----------------------^
Expecting 'CLOSE_RAW_BLOCK', 'CLOSE', 'CLOSE_UNESCAPED', 'OPEN_SEXPR', 'CLOSE_SEXPR', 'ID', 'OPEN_BLOCK_PARAMS', 'STRING', 'NUMBER', 'BOOLEAN', 'DATA', got 'INVALID'
    at Object.parseError (/Users/github/Documents/i18n_hbs/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/compiler/parser.js:150:11)
    at Object.parse (/Users/github/Documents/i18n_hbs/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/compiler/parser.js:202:22)
    at HandlebarsEnvironment.parse (/Users/github/Documents/i18n_hbs/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/compiler/base.js:25:30)
    at compileInput (/Users/github/Documents/i18n_hbs/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:451:19)
    at ret (/Users/github/Documents/i18n_hbs/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:460:18)
    at Object.invokePartial (/Users/github/Documents/i18n_hbs/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/runtime.js:208:12)
    at Object.invokePartialWrapper [as invokePartial] (/Users/github/Documents/i18n_hbs/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/runtime.js:47:39)
    at Object.eval (eval at <anonymous> (/Users/github/Documents/i18n_hbs/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:209:23), <anonymous>:5:26)
    at ret (/Users/github/Documents/i18n_hbs/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/runtime.js:144:30)
    at ret (/Users/github/Documents/i18n_hbs/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:462:21)
    at /Users/github/Documents/i18n_hbs/node_modules/hbs/lib/hbs.js:62:19
    at fs.js:334:14
    at FSReqWrap.oncomplete (fs.js:95:15)

Is there some helper I need to add? And if yes, which one?

Cheers,

Silas

[jamuhl]

http://i18next.com/pages/doc_templates.html is for clientside but might be same for serverside...

just be sure to use the t function on request object to assert you get translations in users language.

[lenovouser]

Sorry, put the wrong documentation link in there. Here is the right one. I think you understood me wrong, sorry for that. Translation is already working, but variables aren't. (Like names, links etc.)

[jamuhl]

not sure but according to http://handlebarsjs.com/expressions.html#helpers you need to use triple {

<p>{{{t 'my.translation.key', ( my: "variable" ) }}}</p>

but not sure as i never used handlebars on serverside.

[lenovouser]

@jamuhl Nope, that doesn't work. Thanks for trying to help though! I am adding the maintainers of hbs and handlebars to this so they can maybe help.

/cc @kpdecker & @defunctzombie

[kpdecker]

That syntax is invalid. You want something like {{t 'foo' my='variable'}} That will populate options.hash with {my: 'variable'}. That means your t implementation needs to expect this and not a generic hash structure.

[lenovouser]

@kpdecker

I tried it with

handlebars.registerHelper('t', function(key, options) {
  // The console.log's are added by me
  console.log(key)
  console.log(options)
  var result = i18n.t(key, options);
  console.log(result)
  return new handlebars.SafeString(result);
});

from the Template Documentation

The console log shows:

key:

my.translation.key

options:

{ name: 't',
  hash: { my: 'variable' },
  data:
   { root:
      { settings: [Object],
        some: 'othervars',
        _locals: {},
        cache: false } } }

result:

test __my__ test

So something isn't working, but I think that the problem is more on my or i18next's side.

Any ideas @jamuhl?

Cheers,

Silas

[kpdecker]

I suspect that you want something like:

  var result = i18n.t(key, options.hash);

On Sun, Aug 9, 2015 at 4:02 PM ApfelUser notifications@github.com wrote:

@kpdecker https://github.com/kpdecker

I tried it with

handlebars.registerHelper('t', function(key, options) {
// The console.log's are added by me
console.log(key)
console.log(options)
var result = i18n.t(key, options);
console.log(result)
return new handlebars.SafeString(result);
});

from the Template Documentation
http://i18next.com/pages/doc_templates.html

The console log shows:

key:

my.translation.key

options:

{ name: 't',
hash: { my: 'variable' },
data:
{ root:
{ settings: [Object],
some: 'othervars',
_locals: {},
cache: false } } }

result:

test my test

So something isn't working, but I think that the problem is more on my or
i18next's side.

Any ideas @jamuhl https://github.com/jamuhl?

Cheers,

Silas

—
Reply to this email directly or view it on GitHub
#199 (comment)
.

[lenovouser]

@kpdecker Thanks so much! That worked. I am writing it down here for people with the same issue:

handlebars.registerHelper('t', function(key, options) {
  var result = i18n.t(key, options.hash);
  return new handlebars.SafeString(result);
});

@jamuhl Do you maybe want to add this to the documentation? I could too, but didn't find a repository for it.

/closing

[jamuhl]

yes will add this to doc. thanks to all for solving this.

[jamuhl]

closing...handlebars will not be in docs anylonger. hope someone will come up with some plugin for handlebars for v2 of i18next: http://i18next.github.io/i18next.com/docs/ecosystem/#frameworks