Prevent addition of span tag

Question

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

Answer 1

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.