web-dev-qa-db-fra.com

Comment faire i18n avec Handlebars.js (modèles de moustache)?

J'utilise actuellement Handlebars.js (associé à Backbone et jQuery) pour rendre une application Web presque totalement restituée du côté client, et des problèmes d'internationalisation se sont produits.

Comment puis-je faire ce travail?

Y a-t-il des plugins?

javascriptjqueryinternationalizationhandlebars.jsmustache
40
mdcarter

Je sais que cela a été répondu, mais je voudrais partager ma solution simple. Pour tirer parti de la solution de Gazler utilisant I18n.js (que nous utilisons avec notre projet au travail), je viens d'utiliser un très simple assistant Handlebars pour faciliter le processus de localisation à la volée:

Gestionnaire 

Handlebars.registerHelper('I18n',
  function(str){
    return (I18n != undefined ? I18n.t(str) : str);
  }
);

Modèle 

<script id="my_template" type="x-handlebars-template">
    <div>{{I18n myVar}}</div>
</script>

Le principal avantage de ceci est qu’il n’ya pas de pré/post traitement coûteux sur l’objet json entier. Sans compter que si le JSON entrant contient des objets/des tableaux imbriqués, le temps passé à les rechercher et à les analyser peut devenir coûteux si l'objet est énorme.

À votre santé!

81
poweratom

https://github.com/fnando/i18n-js est une gemme Ruby qui créera un fichier d'internationalisation à partir de votre dossier config/locales. Cependant, si vous n'utilisez pas Rails, vous pouvez trouver le javascript utilisé seul ici .

Vous stockez alors simplement les traductions dans un objet imbriqué.

I18n.translations = {"en":{"date":{"formats":{"default":"%Y-%m-%d","short":"%b %d","long":"%B %d, %Y"}}}};

Un correctif à moustache traduisant automatiquement les chaînes au format @@ translation_key @@ est également utile pour vous dans le cadre de mes projets.

i18nize = function (result) {
    if (I18n) {
      var toBeTranslated = result.match(/@@([^@]*)@@/gm);
      if (!toBeTranslated) return result;
      for(var i = 0; i < toBeTranslated.length; i++) {
        result = result.replace(toBeTranslated[i], I18n.t(toBeTranslated[i].replace(/@/g, "")));
      }
    }
    return result;
};

Vous appelez ensuite i18nize after render pour vous permettre de placer des traductions dans vos modèles au lieu de les transmettre.

Méfiez-vous des correctifs de moustache car vous ne pourrez pas transférer vos modèles vers des implémentations de moustache standard. Cependant, dans mon cas, les avantages offerts l'emportaient sur ce problème.

J'espère que cela t'aides.

5
Gazler

Basé sur la réponse de @poweratom:

Seulement avec ember.js , idem avec les options passées à I18n.js.

Il sera rechargé comme par magie si les propriétés calculées sont utilisées.

Ember.Handlebars.helper "t", (str, options) ->
  if I18n? then I18n.t(str, options.hash) else str

Modèle:

{{t 'sharings.index.title' count=length}}

Yml:

en:
  sharings:
    index:
      title: To listen (%{count})
4
jvenezia

La question a reçu une réponse, mais il se peut que vous ne souhaitiez pas dépendre d’une librairie i8n et utiliser complètement la vôtre. J'utilise ma propre source inspirée de https://Gist.github.com/tracend/3261055

1
Sahib Khan

Avec NodeJs/Express:

  • node-i18n (détecte l'en-tête Accept-Language)

      app.use(i18n.init);

  • Exemple de fichier de traduction

    {   
 "hello": "hello",   
 "home-page": {
   "home": "Home",
    "signup": "Sign Up"  
 } 
}

  • Dans le contrôleur Express

    ...
data.tr = req.__('home-page');
var template = Handlebars.compile(source);
var result = template(data);

  • Modèle de guidon

        <li class="active"><a href="/">{{tr.home}}</a></li>
1
dam1

pour ceux qui n'utilisent aucun framework JS http://i18next.com semble prometteur aussi 

il suffit de créer un assistant de guidon pour appeler les traductions comme ici http://i18next.com/pages/doc_templates.html

0
equivalent8