Traduções de Ember.js com ligações

Eu queria criar um auxiliar de tradução no estilo Rails para minhas visualizações, mas os guias ember não mostram como criar um auxiliar vinculado a qualquer outra coisa senão o valor que você passa.

App = Ember.Application.create({i18n: Ember.Object.create({})});

# This could be a model in your application route...
Ember.$.getJSON("/translations").then(function(translations){
    App.set("i18n", translations);
});

# create the view, which we'll bind to App.get("i18n")
var I18nTextView = Ember.View.extend({
  tagName: "span",
  template: Ember.Handlebars.compile("{{view.translatedContent}}"),

  translatedContent: (function() {
    return this.get("content").get(this.get("value"));
  }).property("content")
});

Ember.Handlebars.registerHelper("i18n", function(i18nKey, options) {
  options.hash.contentBinding = "App.i18n";
  options.hash.value = i18nKey
  return Ember.Handlebars.helpers.view.call(this, I18nTextView, options);
});

Agora, toda vez que você atualizar App.set("i18n"), todas as traduções serão atualizadas.
Em sua opinião, basta usar:

<div class="i18n-demo">
  {{i18n "my.scoped.translation.key"}}
</div>

Você pode estender isso ainda mais para adicionar estilos à extensão e destacar as traduções ausentes.