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)?

Why are passing a link into a translation? Do you want a link with a translated name? Or do you want to modify the URL via i18n? — Andrey Mikhaylov - lolmaus, Jun 10 '15 at 14:45
No it's just a link to another page. Eg: `Go to settings page`. In another language the link can be at a different place in the sentence. So, I want the link within the translation instead in the view. — Jacob van Lingen, Jun 10 '15 at 14:52
For a real solution to this problem, see http://stackoverflow.com/questions/40265294/link-interpolation-i18n. — Jacob van Lingen, Feb 23 '17 at 12:42

score 4 · Accepted Answer · answered Jun 10 '15 at 14:56

4

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.'

answered Jun 10 '15 at 14:56

Andrey Mikhaylov - lolmaus

23,107
6
84
133

Yeah I get that. But this is a workaround, not a solution. Still, thanks for pointing me to this direction. – Jacob van Lingen Jun 10 '15 at 15:16
You basically want the i18n subsystem to work with Handlebars templates rather than text strings. – Andrey Mikhaylov - lolmaus Jun 10 '15 at 15:54
Yeah, that would be awesome :P – Jacob van Lingen Jun 11 '15 at 07:08

RhinoWalrus · Answer 2 · 2017-05-12T19:31:08.560

1

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"

edited May 12 '17 at 19:31

answered May 12 '17 at 19:17

RhinoWalrus

3,009
2
32
41

Yeah I know now. Back in Februari, I posted as comment to my question: `For a real solution to this problem, see stackoverflow.com/questions/40265294/link-interpolation-i18n‌.`. – Jacob van Lingen May 15 '17 at 08:17
1

Sorry I missed that. Hopefully this answer will help someone else down the road. – RhinoWalrus May 15 '17 at 13:19

Ember i18n dynamic link inside of translation

2 Answers2