Ember i18n dynamic link inside of translation

Question

I was wondering how I could pass a link into to {{t}} helper. I am using v3.0.1 of Ember i18n at the moment.

Obviously you cannot pass a link helper into a t helper (something like

{{ t "some-translation-string" link={{#link-to 'page' model}}page{{/link-to}} }}

won't work of course).

So I was thinking, maybe I can create a custom prop that returns a whole link. But then again, how do I create that link?. Does anyone know of a method that has the same arguments as the link-to helper, but returns just the link (In my case 'page' and model)?

Answer 1

You might be able to achieve that with a basic link, but I doubt that you'll be able to toss a live link-to component inside a translation.

So instead split your translation string into pieces:

{{t 'goToSettingPage-before'}}
{{link-to (t 'goToSettingPage-link') 'route.name'}}
{{t 'goToSettingPage-after'}}

'goToSettingPage-before': 'Go to'
'goToSettingPage-link':   'settings'
'goToSettingPage-after':  'page.'

Answer 2

You can create a helper to do exactly what you want using ember-href-to.

Helper:

compute (params) {
  const i18n = this.get('i18n');
  const target = hrefTo(this, params[1]);
  // const targetParam = params[2]; //dynamic segment
  const text = i18n.t(params[0]);

  return Ember.String.htmlSafe('<a href='+ target +'>' + text +'</a>');
}

Template usage:

{{t "linkExample-learnMore" link=(helper-name 'linkExample-here' 'some.route')}}

Translations:

"linkExample-learnMore": "Click {{{link}}} to do something",
"linkExample-here":"here"