Interpolating a helper about ember-i18n HOT 10 CLOSED

When we need complex DOM inside a translated string, we use a view/component:

App.OrganizationsVersionsSubmittedComponent = Em.Component.extend({

  user: null,

  template: Em.I18n.translations['organizations.versions.submitted'],

  userLink: function() {
    var user = this.get('user'),
        link = '<a href="/users/%@">%@</a>'.fmt(user.get('id'), user.get('name'));
    return new Handlebars.SafeString(link);
  }.property('user.id', 'user.name')

});

from ember-i18n.

Ember's having trouble picking up the template. When I only define the component, I get this error:

Error: <Ember._HandlebarsBoundView:ember691> Handlebars error: Could not find property 'organizations-versions-submitted' on object <Ember.Component:ember679>

If I create a blank component template by that name, that the error message disappears, but Ember renders the blank template rather than Em.I18n.translations['organizations.versions.submitted']. Am I missing something in my setup? I reread the Components section in the Ember guides, but I can't find the answer there.

from ember-i18n.

Sorry, I shouldn't have specified Component. Components are fairly magical creatures, and they're very useful when you get them just right, but they're also finicky. Try starting with just an Em.View subclass:

App.OrganizationsVersionsSubmittedView = Em.View.extend({
  user: null,

  template: Em.Handlebars.compile('{{t "organizations.versions.submitted" linkBinding="view.userLink"}}'),

  link: ...
});

This assumes that the organizations.versions.submitter translation looks like "Blah blah blah {{link}}.".

If that works, try changing Em.View to Em.Component and putting what I had in the template in the component template file. Then you can use it like

{{organizations-versions-submitted user="some.user"}}

from ember-i18n.

Yes, this works! So long as I place this in the template:

{{t "organizations.versions.submitted" linkBinding="view.userLink"}}

This works as both a view and a component.

I've been toying with the component a bit, and I feel like this could be abstracted by sending the translation path like so:

linked-translation translation='organizations.versions.submitted' resource=user

Whistlr.LinkedTranslationComponent = Em.Component.extend
  resource: null
  translation: null

t view.translation resourceLinkBinding="view.resourceLink"

The only problem is that "view.translation" is taken as the actual translation path, rather than a reference to it.

from ember-i18n.

#66 is relevant to the reference-vs-String problem.

I, too, want to work on better Component support for ember-i18n. It will
have to wait until our app is on Ember 1.0 :)
On Oct 17, 2013 5:10 PM, "Timothy Baron" [email protected] wrote:

Yes, this works! So long as I place this in the template:

{{t "organizations.versions.submitted" linkBinding="view.userLink"}}

This works as both a view and a component.

I've been toying with the component a bit, and I feel like this could be
abstracted by sending the translation path like so:

linked-translation translation='organizations.versions.submitted' resource=user

Whistlr.LinkedTranslationComponent = Em.Component.extend
resource: null
translation: null

t view.translation resourceLinkBinding="view.resourceLink"

The only problem is that "view.translation" is taken as the actual
translation path, rather than a reference to it.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/79#issuecomment-26563532
.

from ember-i18n.

I'm sure there's a better approach to this, but I came up with a simple hack:

t "view.translation" dynamic=true firstLinkBinding="view.firstLink" secondLinkBinding="view.secondLink"

Handlebars.registerHelper('t', function(key, options) {
  . . . .
  if (options.hash.dynamic === true){
    key = eval(key)
  }
  . . . .
}

from ember-i18n.

Hello. Please, tell me, hoe can i work with link-to helper in ember 2.3:
I thought {{t "forms.register.login-link" link=(link-to (t 'forms.login.title') 'login')}} is should work, but doesn't

from ember-i18n.

The problem in this case is that link-to doesn't emit a string or even a Handlebars.SafeString. It's a very complex helper that manages DOM state. Unfortunately, Ember doesn't provide an easy way to generate a link -- or even an href from the router -- as a String.

from ember-i18n.

Hello,
I am having the same problem with a quite complex multi-language website I'm developing.
I have a suggestion: wouldn't it be possible to output directly in HTMLBars.compile (or HTMLBars.render) from the T helper? I would guess there MUST be a solution to output DOM elements directly into the template from helpers.
This would allow the use of any kind of HTMLBars syntax inside the translation text; possibly changing the syntax for interpolated values, which at this point, could even be handled by simply passing the scope as a parameter, and setting the interpolated value directly in the template (or component) that calls the T helper or method.
Makes sense?

Edit: To clarify about the scope: it would suffice to send any object with the needed properties, whether actual strings or a DOM element, as outputted by the link-to helper, for example.

from ember-i18n.

wouldn't it be possible to output directly in HTMLBars.compile (or HTMLBars.render) from the T helper

It might... if all of your translation happens at the template layer. But it wouldn't work if you wanted to do any translations in a component

export default Ember.Component.extend({
  foo: 'bar',

  fooText: Ember.computed('i18n.locale', function() {
    return this.get('i18n').t(`some.foo.${this.get('foo')}`);
  }
});

because HTMLBars doesn't exist there. There's no DOM on which it could operate.

from ember-i18n.