Ember i18n Dynamic Text for a Tag (Using Placeholder)

Question

I'm currently translating an application using ember's i18n library.

With the use of a placeholder, I'm able to translate text for a tag, nevertheless, I'm are only able to pass the tag to the placeholder if the text given is a string.

The tags we are using are normal i18n tags:

example_tag : 'ejemplo'

The method we have for the placeholder we have right now looks like this:

TranslationsPlaceHolder: (->{ 
    return Ember.I18n.t('example_tag');
})

and the way we call it is like this:

{{input value=view.example placeholder=view.TranslationsPlaceholder}}

I'm currently looking for a way we can assign different tags with the use of one placeholder with dynamic tags, so we could pass the tag we want to translate as a parameter and only use one placeholder with different tags.

We are using reference from this question: Inserting a translation into a placeholder with Emblem.js

Thanks a lot!

mistahenry · Accepted Answer · 2018-12-04T14:30:56.743

Any chance you could refactor the code to use the native <input> instead with one way binding? Here is a twiddle that shows you what I mean.

<input value={{inputValue}} oninput={{action (mut inputValue) value="target.value"}} placeholder={{translate "placeholder"}} />

where translate is a helper:

const translations = {
  placeholder: "Type here"
};
export function translate(params/*, hash*/) {
  return translations[params] || `${params}_NOT_FOUND`;
}

export default Ember.Helper.helper(translate);

You are safe to switch to the native <input> if you are >= Ember 2.3.1.

If you are less than that (which is the only time I'd recommend doing what I'm suggesting here instead of one way binding), you can provide your own tagless component wrapper around {{input}} that takes the key for the placeholder and does the translation via computed properties. See this twiddle for an example.

Your input becomes:

{{translated-placeholder-input value=value placeholderKey="placeholder"}}

where translated-placeholder is a tagless component:

import Ember from 'ember';
const translations = {
  placeholder: "Type here..."
};
export default Ember.Component.extend({
  //creates the component without an enclosing div
  tagName: "",
  translatedPlaceholder: Ember.computed('placeholderKey', function(){
    let key = this.get('placeholderKey');
    if(!key){
      return ""; 
    }
    return translations[key] || `${key}_NOT_FOUND`;
  })
});

that's simply a passthrough to input

{{input value=value placeholder=translatedPlaceholder}}

The drawback to this approach (besides all that comes with 2 way binding), is having to pass explicitly any attribute bound to the component to the {{input}}

Ember i18n Dynamic Text for a Tag (Using Placeholder)

1 Answers1