ember.jsember-i18n

Prevent addition of span tag


I have the following markup in a template:

<p class="form-action-title"><i class="icon-edit"></i> {{t generic.title.edit}} ...</p>

And this is rendered as:

<p class="form-action-title"><i class="icon-edit"></i> <span id="i18n-14">Editar</span> ...</p>

I would like to completely remove the <span> for the translated text (it messes-up my styling). I have tried with:

{{t generic.title.edit tagName=""}}

But has no effect. The strange thing is that, according to the documentation, the following {{t}}:

{{#view Em.Button titleTranslation="button.add_user.title">
  {{t button.add_user.text}}
{{/view}}

Renders no <span>:

<button title="Add a user">
  Add
</button>

(I haven't tried this, I just trust the docs)

What can I do to get rid of the <span>?


Solution

  • Two options:

    Patch the source: https://github.com/jamesarosen/ember-i18n/blob/master/lib/i18n.js#L133 and https://github.com/jamesarosen/ember-i18n/blob/master/lib/i18n.js#L170

    Or create your own simple helper:

    Ember.Handlebars.registerHelper('i18n', function(key) {
      return new Handlebars.SafeString(Ember.I18n.t(key))
    });
    

    and then

    {{i18n generic.title.edit}}
    

    Hope it helps.